{"componentChunkName":"component---src-pages-components-ui-shell-header-usage-mdx","path":"/components/UI-shell-header/usage/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"UI shell header","description":"This header 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-header/usage.mdx","titleType":"prepend","MdxNode":{"id":"e8a665da-73cb-5d54-a7db-381ab9cd9e38","children":[],"parent":"7053fc64-13d0-51b6-bd01-1aa4b807a6cc","internal":{"content":"---\ntitle: UI shell header\ndescription: This header 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 header 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\n\nGeneral guidance\nAnatomy\nIcon placement\nBehavior\n\n\n\n\n\nUI shell header\n\n## Resources\n\n\n \n \n \n \n \n
\n\n## General guidance\n\nThe UI shell is made up of three components: The header, the [left panel](/components/UI-shell-left-panel/usage), 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\n\nUI shell components\n\nFor each UI shell component, left-to-right translates to product-to-global. The left side of the header contains items relevant at the product level. Moving to the right along the header, the functions become more global. Elements in the middle of the header should represent system-level controls. Elements on the right side of the header, such as the switcher, are the most global in their scope and span multiple products.\n\n## Anatomy\n\nThe header spans the full width of the viewport and is the topmost element in the browser window. Header elements are persistent throughout the product experience.\n\n\n\nPrimary header\n\n### Header elements\n\n#### Hamburger menu\n\nThe hamburger icon is used to open product navigation such as the [left panel.](/components/UI-shell-left-panel/usage)\n\n#### System name\n\nFor IBM products, the system name is always preceded by “IBM.”\n\n#### Primary navigation\n\nLinks in the header are supported as product navigation, if required. These links drop down to the side menu in narrow screen widths.\n\n#### Dropdown\n\nDropdowns are supported as product navigation, if required. Include the down-pointing chevron after the link label. Dropdowns open on click and are closed by either selecting an item in the menu, clicking outside the menu area, or clicking on the menu label. When open, the chevron should point up. Dropdown menu labels serve only to open the dropdown; they cannot link to another page in the product.\n\n#### Header icons\n\nThese icons are reserved for universal, system-level functions such as profile, search, notifications, and similar functions. Not every product on a system is required to show the same header icons, but it is recommended for a better cross-product user experience.\n\n#### Switcher\n\nThe switcher provides a way for the user to easily navigate _between_ products and systems. Recommended uses for this component include recently used apps, frequently used apps, or all apps attached to the user’s account. If the list is a manageable size, include all apps or products available on the system.\n\nLinks to related systems should also live in the switcher. If you’re building a product for IBM, your switcher should include a link to [IBM.](http://ibm.com/)\n\n## Icon placement\n\nIcons are not a required element of the header and a product may choose to use any set of icons for their UI. Icons should always be aligned to the right of the header with no gaps between icons.\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n### Example placement\n\nThe example below shows a header with a switcher, three core icons, a product icon, and search.\n\n\n\n\n\n\n\n
\n\n| Icon | Position | |\n| ------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Search | Left | Search should always be positioned as the furthest left icon. This is to allow for a expanding search field that does not disrupt other icon positions. |\n| Other | Right of Search and left of core icons | The number of header icons a product uses may vary. This placement will help avoid disrupting the position of the core icons and inconsistencies as your user navigates between other product shell headers. |\n| Help | 4th from the right | |\n| Notifications | 3rd from the right | |\n| Account | 2nd from the right | |\n| Switcher | Right | The switcher should always be positioned as the furthest right icon. This ensures the icon does not shift when navigating across systems. |\n\n## Behavior\n\nAs a header scales down to fit smaller screen sizes, header links and menus should collapse into a left-panel hamburger menu. See the examples below to better understand the header's responsive behavior.\n\nIf your UI includes a left panel, the header links should be added above the left panel items, pushing them down accordingly.\n\n\n\nHeader responsive behavior\n","type":"Mdx","contentDigest":"3dfa5f04107a6948c5963f5a248ba7da","counter":1149,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"UI shell header","description":"This header 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 header\ndescription: This header 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 header 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\n\nGeneral guidance\nAnatomy\nIcon placement\nBehavior\n\n\n\n\n\nUI shell header\n\n## Resources\n\n\n \n \n \n \n \n
\n\n## General guidance\n\nThe UI shell is made up of three components: The header, the [left panel](/components/UI-shell-left-panel/usage), 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\n\nUI shell components\n\nFor each UI shell component, left-to-right translates to product-to-global. The left side of the header contains items relevant at the product level. Moving to the right along the header, the functions become more global. Elements in the middle of the header should represent system-level controls. Elements on the right side of the header, such as the switcher, are the most global in their scope and span multiple products.\n\n## Anatomy\n\nThe header spans the full width of the viewport and is the topmost element in the browser window. Header elements are persistent throughout the product experience.\n\n\n\nPrimary header\n\n### Header elements\n\n#### Hamburger menu\n\nThe hamburger icon is used to open product navigation such as the [left panel.](/components/UI-shell-left-panel/usage)\n\n#### System name\n\nFor IBM products, the system name is always preceded by “IBM.”\n\n#### Primary navigation\n\nLinks in the header are supported as product navigation, if required. These links drop down to the side menu in narrow screen widths.\n\n#### Dropdown\n\nDropdowns are supported as product navigation, if required. Include the down-pointing chevron after the link label. Dropdowns open on click and are closed by either selecting an item in the menu, clicking outside the menu area, or clicking on the menu label. When open, the chevron should point up. Dropdown menu labels serve only to open the dropdown; they cannot link to another page in the product.\n\n#### Header icons\n\nThese icons are reserved for universal, system-level functions such as profile, search, notifications, and similar functions. Not every product on a system is required to show the same header icons, but it is recommended for a better cross-product user experience.\n\n#### Switcher\n\nThe switcher provides a way for the user to easily navigate _between_ products and systems. Recommended uses for this component include recently used apps, frequently used apps, or all apps attached to the user’s account. If the list is a manageable size, include all apps or products available on the system.\n\nLinks to related systems should also live in the switcher. If you’re building a product for IBM, your switcher should include a link to [IBM.](http://ibm.com/)\n\n## Icon placement\n\nIcons are not a required element of the header and a product may choose to use any set of icons for their UI. Icons should always be aligned to the right of the header with no gaps between icons.\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n### Example placement\n\nThe example below shows a header with a switcher, three core icons, a product icon, and search.\n\n\n\n\n\n\n\n
\n\n| Icon | Position | |\n| ------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Search | Left | Search should always be positioned as the furthest left icon. This is to allow for a expanding search field that does not disrupt other icon positions. |\n| Other | Right of Search and left of core icons | The number of header icons a product uses may vary. This placement will help avoid disrupting the position of the core icons and inconsistencies as your user navigates between other product shell headers. |\n| Help | 4th from the right | |\n| Notifications | 3rd from the right | |\n| Account | 2nd from the right | |\n| Switcher | Right | The switcher should always be positioned as the furthest right icon. This ensures the icon does not shift when navigating across systems. |\n\n## Behavior\n\nAs a header scales down to fit smaller screen sizes, header links and menus should collapse into a left-panel hamburger menu. See the examples below to better understand the header's responsive behavior.\n\nIf your UI includes a left panel, the header links should be added above the left panel items, pushing them down accordingly.\n\n\n\nHeader responsive behavior\n","fileAbsolutePath":"/tmp/35443907/src/pages/components/UI-shell-header/usage.mdx"}}}}