{"componentChunkName":"component---src-pages-components-ui-shell-right-panel-usage-mdx","path":"/components/UI-shell-right-panel/usage/","result":{"pageContext":{"frontmatter":{"title":"UI shell right panel","description":"This right 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-right-panel/usage.mdx","titleType":"prepend","MdxNode":{"id":"dfd59929-e5d8-57aa-81a9-dc4e0843c051","children":[],"parent":"1fb9c217-643e-5d54-b0d5-41578e7858c5","internal":{"content":"---\ntitle: UI shell right panel\ndescription: This right 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<PageDescription>\n\nThe right 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</PageDescription>\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    >\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](/components/UI-shell-right-panel/usage), and the right panel. 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 right panel is invoked by icons on the right side of the header, and remains anchored to that icon. Right panels have a consistent width, span the full height of the viewport, and are flush to the right edge of the viewport.\n\nNote that the switcher also lives in a right panel.\n\n![Header panel and switcher.](images/right-panel-usage-1.png)\n\n<Caption>\n  The right panel configured as an empty header panel (left) and a switcher\n  (right).\n</Caption>\n\n#### Switcher item\n\nA switcher item is anything that changes what product, offering, or property occupies the UI shell. Consider moments in a product when you switch from a calendar to a mailbox, from Kubernetes to Catalog. These items belong in the switcher.\n\n#### Switcher divider\n\nA switcher divider groups similar switcher items. You can use a divider to set apart a parent domain, group child domains similar in hierarchy to the parent, and set apart additional resources. The divider should not be used to separate every switcher item.\n\n### Switcher\n\nThe far right header icon is reserved for the switcher icon. The switcher icon and the switcher panel should only be used together.\n\n<DoDontRow>\n  <DoDont colLg={6} caption=\"Positioned the switcher to the far right.\">\n\n![Example of the switcher icon being used correctly.](images/right-panel-usage-2.png)\n\n  </DoDont>\n  <DoDont type=\"dont\" colLg={6}  caption=\"Do not position other icons to the right of the switcher.\">\n\n![The switcher icon is not positioned to the far right.](images/right-panel-usage-3.png)\n\n  </DoDont>\n</DoDontRow>\n\n<DoDontRow>\n  <DoDont type=\"dont\" colLg={6}  caption=\"Do not use another icon for the switcher.\">\n\n![The switcher not using the switcher icon.](images/right-panel-usage-4.png)\n\n  </DoDont>\n</DoDontRow>\n\n## Behavior\n\n#### Expansion\n\nRight panels always float over page content, and always remain anchored to their associated icon. You can have multiple right panels, but only one can be expanded at any time.\n\n#### Dismissal\n\nOnce expanded, the panel's associated icon is outlined, with its bottom border flowing into the panel. To dismiss the panel, a user must select an item, or click or tap the header icon.\n\n#### Selected state\n\nThere is no selected state for right panel items. Even if a user is currently within one of the panel items, the item remains unselected.\n","type":"Mdx","contentDigest":"63f7ad7660d32e4520c7e5baa4a1edbb","counter":1448,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"UI shell right panel","description":"This right 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 right panel\ndescription: This right 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<PageDescription>\n\nThe right 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</PageDescription>\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    >\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](/components/UI-shell-right-panel/usage), and the right panel. 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 right panel is invoked by icons on the right side of the header, and remains anchored to that icon. Right panels have a consistent width, span the full height of the viewport, and are flush to the right edge of the viewport.\n\nNote that the switcher also lives in a right panel.\n\n![Header panel and switcher.](images/right-panel-usage-1.png)\n\n<Caption>\n  The right panel configured as an empty header panel (left) and a switcher\n  (right).\n</Caption>\n\n#### Switcher item\n\nA switcher item is anything that changes what product, offering, or property occupies the UI shell. Consider moments in a product when you switch from a calendar to a mailbox, from Kubernetes to Catalog. These items belong in the switcher.\n\n#### Switcher divider\n\nA switcher divider groups similar switcher items. You can use a divider to set apart a parent domain, group child domains similar in hierarchy to the parent, and set apart additional resources. The divider should not be used to separate every switcher item.\n\n### Switcher\n\nThe far right header icon is reserved for the switcher icon. The switcher icon and the switcher panel should only be used together.\n\n<DoDontRow>\n  <DoDont colLg={6} caption=\"Positioned the switcher to the far right.\">\n\n![Example of the switcher icon being used correctly.](images/right-panel-usage-2.png)\n\n  </DoDont>\n  <DoDont type=\"dont\" colLg={6}  caption=\"Do not position other icons to the right of the switcher.\">\n\n![The switcher icon is not positioned to the far right.](images/right-panel-usage-3.png)\n\n  </DoDont>\n</DoDontRow>\n\n<DoDontRow>\n  <DoDont type=\"dont\" colLg={6}  caption=\"Do not use another icon for the switcher.\">\n\n![The switcher not using the switcher icon.](images/right-panel-usage-4.png)\n\n  </DoDont>\n</DoDontRow>\n\n## Behavior\n\n#### Expansion\n\nRight panels always float over page content, and always remain anchored to their associated icon. You can have multiple right panels, but only one can be expanded at any time.\n\n#### Dismissal\n\nOnce expanded, the panel's associated icon is outlined, with its bottom border flowing into the panel. To dismiss the panel, a user must select an item, or click or tap the header icon.\n\n#### Selected state\n\nThere is no selected state for right panel items. Even if a user is currently within one of the panel items, the item remains unselected.\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/components/UI-shell-right-panel/usage.mdx"}}}}