Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
__tests__
Content.js
Header.js
HeaderContainer.js
HeaderGlobalAction.js
HeaderGlobalBar.js
HeaderMenu.js
HeaderMenuButton.js
HeaderMenuItem.js
HeaderName.js
HeaderNavigation.js
HeaderPanel.js
HeaderSideNavItems.js
Link.js
README.md
SideNav.js
SideNavDetails.js
SideNavFooter.js
SideNavHeader.js
SideNavIcon.js
SideNavItem.js
SideNavItems.js
SideNavLink.js
SideNavLinkText.js
SideNavMenu.js
SideNavMenuItem.js
SideNavSwitcher.js
SkipToContent.js
Switcher.js
SwitcherDivider.js
SwitcherItem.js
UIShell-story.js
index.js

README.md

UI Shell

Components for building a product shell when using the Carbon Design System

Components

  • Header: used to render the top bar in your application
    • HeaderMenuButton: used to display the trigger for a menu
    • HeaderName: used to display the name of the product
    • HeaderGlobalBar: used to display global actions
      • HeaderGlobalAction: used to display a global action
    • HeaderMenubar: used to display nav links
      • HeaderMenu: used to display a menu in the nav
      • HeaderMenuItem: used to display a menu item, often a link
  • SideNav: used to render the container for the side navigation of a page
    • SideNavHeader: used to render the top bar in the side navigation
      • SideNavDetails: renders the title for the side nav
        • SideNavSwitcher: provides an optional tool to handle switching at the top-level
    • SideNavItems: used for rendering items in the sub nav
      • SideNavLink: renders a link in the side nav
      • SideNavMenu: renders a collapsible menu in the side nav
        • SideNavMenuItem: renders a link in a side nav menu
    • RightPanel: used for render the container for header actions on the right
      • Switcher: used to render a list of product links inside the right panel
        • SwitcherItem: used to render list item, often a link
        • SwitcherDivider: used to render a divider for list items
You can’t perform that action at this time.