{"componentChunkName":"component---src-pages-components-ui-shell-left-panel-usage-mdx","path":"/components/UI-shell-left-panel/usage/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"UI shell left panel","description":"This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/UI-shell-left-panel/usage.mdx","titleType":"prepend","MdxNode":{"id":"5955f1b3-6459-5eda-a36e-670316b5281d","children":[],"parent":"c9dc9d13-2fab-5ab2-89e3-b08c33c650bc","internal":{"content":"---\ntitle: UI shell left panel\ndescription: This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n### This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform. It provides a common set of interaction patterns that persist between and across products.\n\n<AnchorLinks>\n\n<AnchorLink>General guidance</AnchorLink>\n<AnchorLink>Anatomy</AnchorLink>\n<AnchorLink>Behavior</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n  <Column colLg={4} colMd={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"UI Shell template\"\n      href=\"https://sketch.cloud/s/EjVmA\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## General guidance\n\nThe UI shell is made up of three components: The [header](/components/UI-shell-header/usage), the left panel, and the [right panel](/components/UI-shell-right-panel/usage). All three can be used independently, but the components were designed to work together.\n\n| Shell UI component |                                                                                                                                         |\n| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |\n| Header             | The highest level of navigation. The header can be used on its own for simple products or be used to trigger the left and right panels. |\n| Left panel         | An optional panel that is used for a product's navigation.                                                                              |\n| Right panel        | An optional panel that shows additional system level actions or content associated with a system icon in the header.                    |\n\n<Row>\n<Column colLg={8}>\n\n![UI shell components.](images/shell-usage-1.png)\n\n<Caption>UI shell components</Caption>\n\n</Column>\n</Row>\n\n## Anatomy\n\nThe left panel contains secondary navigation and is positioned below the header and fixed to the left. Both links and sub-menus can be used in the side-nav and may be mixed together.\n\n<Row>\n<Column colLg={8}>\n\n![Left panel with nested sub-menus.](images/left-panel-usage-1.png)\n\n<Caption>Left panel with nested sub-menus.</Caption>\n\n</Column>\n</Row>\n\n## Behavior\n\nUse the left panel if there are more than five secondary navigation items, or if you expect a user to switch between secondary items frequently. Sub-menus are denoted with a chevron and expand when clicked, pushing the other items down in the panel. To collapse the sub-menu, the user must again click the menu header in the left panel.\n\nThe left panel does not support three tiers of navigation. If you have additional content to display beneath a sub-menu, use tabs within the page.\n","type":"Mdx","contentDigest":"f74c2290542dcdaf3c2e0ffb5b92b61e","counter":1302,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"UI shell left panel","description":"This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: UI shell left panel\ndescription: This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n### This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform. It provides a common set of interaction patterns that persist between and across products.\n\n<AnchorLinks>\n\n<AnchorLink>General guidance</AnchorLink>\n<AnchorLink>Anatomy</AnchorLink>\n<AnchorLink>Behavior</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n  <Column colLg={4} colMd={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"UI Shell template\"\n      href=\"https://sketch.cloud/s/EjVmA\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## General guidance\n\nThe UI shell is made up of three components: The [header](/components/UI-shell-header/usage), the left panel, and the [right panel](/components/UI-shell-right-panel/usage). All three can be used independently, but the components were designed to work together.\n\n| Shell UI component |                                                                                                                                         |\n| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |\n| Header             | The highest level of navigation. The header can be used on its own for simple products or be used to trigger the left and right panels. |\n| Left panel         | An optional panel that is used for a product's navigation.                                                                              |\n| Right panel        | An optional panel that shows additional system level actions or content associated with a system icon in the header.                    |\n\n<Row>\n<Column colLg={8}>\n\n![UI shell components.](images/shell-usage-1.png)\n\n<Caption>UI shell components</Caption>\n\n</Column>\n</Row>\n\n## Anatomy\n\nThe left panel contains secondary navigation and is positioned below the header and fixed to the left. Both links and sub-menus can be used in the side-nav and may be mixed together.\n\n<Row>\n<Column colLg={8}>\n\n![Left panel with nested sub-menus.](images/left-panel-usage-1.png)\n\n<Caption>Left panel with nested sub-menus.</Caption>\n\n</Column>\n</Row>\n\n## Behavior\n\nUse the left panel if there are more than five secondary navigation items, or if you expect a user to switch between secondary items frequently. Sub-menus are denoted with a chevron and expand when clicked, pushing the other items down in the panel. To collapse the sub-menu, the user must again click the menu header in the left panel.\n\nThe left panel does not support three tiers of navigation. If you have additional content to display beneath a sub-menu, use tabs within the page.\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/components/UI-shell-left-panel/usage.mdx"}}}}