Skip to main content

Sidenav()

Sidenav(__namedParameters): Element | null

Sidenav - Collapsible side navigation panel

Provides a hierarchical collapsible side navigation intended to be used inside a DrawerLayout. Supports headers, avatars, nested menus, and items.

Parameters​

__namedParameters​

SidenavProps

Returns​

Element | null

Example​

<DrawerLayout push="left">
  <DrawerLayoutMain className="col-start-2">
    <SidenavTrigger>
      <Button variant="icon" size="large">
        <Icon>
          <MenuIcon />
        </Icon>
      </Button>
    </SidenavTrigger>
  </DrawerLayoutMain>
  <Sidenav>
    <SidenavHeader>
      <SidenavAvatar>
        <Icon><AppLogo /></Icon>
        <Heading>Application Header</Heading>
        <Text>subheader</Text>
      </SidenavAvatar>
    </SidenavHeader>
    <SidenavContent>
      <Heading>Navigation</Heading>
      <SidenavItem>
        <Icon><HomeIcon /></Icon>
        <Text>Home</Text>
      </SidenavItem>
      <Divider />
      <SidenavItem isSelected>
        <Icon><SettingsIcon /></Icon>
        <Text>Settings</Text>
      </SidenavItem>
      <Divider />
      <SidenavMenu title="More Options" icon={<Icon><MenuIcon /></Icon>}>
        <SidenavMenuItem>
          <Text>Sub Item 1</Text>
        </SidenavMenuItem>
        <SidenavMenuItem>
          <Text>Sub Item 2</Text>
        </SidenavMenuItem>
      </SidenavMenu>
    </SidenavContent>
    <SidenavFooter>
      <SidenavAvatar>
        <Icon><UserIcon /></Icon>
        <Heading>User Name</Heading>
        <Text>john@example.com</Text>
      </SidenavAvatar>
    </SidenavFooter>
  </Sidenav>
</DrawerLayout>