Side Navigation
Side navigation between different sections or pages.
<SideNavigation css={{ height: '100%' }}> <SideNavigationHeader logo={<Snowflake />} /> <SideNavigationContent> <SideNavigationMenu> <SideNavigationMenuItem label="Track" startIcon={<Route />} /> <SideNavigationMenuGroup defaultExpanded={true} label="Initiate" startIcon={<Carrier />}> <SideNavigationMenuItem label="Shipments" /> <SideNavigationMenuItem label="Templates" /> </SideNavigationMenuGroup> </SideNavigationMenu> <SideNavigationMenu> <SideNavigationMenuItem label="Settings" startIcon={<Settings />} /> </SideNavigationMenu> </SideNavigationContent> <Dropdown placement="right bottom"> <SideNavigationFooter avatarProps={{ fallback: 'BC', }} subTitle="Brandon Clark" title="Manifest Design" /> <DropdownMenu> <DropdownItem key="profile" startIcon={<Person />}> Profile </DropdownItem> </DropdownMenu> </Dropdown> </SideNavigation>
Usage
Controlled
A sidnavigation's state can be fully controlled including both the navigation collapse and the menu group expansion.
function Controlled() { const [isOpen, setIsOpen] = React.useState(true); const [isExpanded, setIsExpanded] = React.useState(true); return ( <SideNavigation css={{ height: '100%' }} isOpen={isOpen} onOpenChange={setIsOpen}> <SideNavigationHeader logo={<Snowflake />} /> <SideNavigationContent> <SideNavigationMenu> <SideNavigationMenuItem label="Track" startIcon={<Route />} /> <SideNavigationMenuGroup isExpanded={isExpanded} label="Initiate" startIcon={<Carrier />} onExpandedChange={setIsExpanded} > <SideNavigationMenuItem label="Shipments" /> <SideNavigationMenuItem label="Templates" /> </SideNavigationMenuGroup> </SideNavigationMenu> <SideNavigationMenu> <SideNavigationMenuItem label="Settings" startIcon={<Settings />} /> </SideNavigationMenu> </SideNavigationContent> <Dropdown placement="right bottom"> <SideNavigationFooter avatarProps={{ fallback: 'BC', }} subTitle="Brandon Clark" title="Manifest Design" /> <DropdownMenu> <DropdownItem key="profile" startIcon={<Person />}> Profile </DropdownItem> </DropdownMenu> </Dropdown> </SideNavigation> ); }
Props
SideNavigation Props
as?The root element to be rendered
SideNavigationContent Props
as?The root element to be rendered
SideNavigationFooter Props
as?The root element to be rendered
SideNavigationHeader Props
as?The root element to be rendered
SideNavigationMenu Props
as?The root element to be rendered
SideNavigationMenuGroup Props
as?The root element to be rendered