NavigationDrawer

Navigation drawers provide access to destinations in your app in large sized devices.

Basic usage

The NavigationDrawer must be composed with NavigationDrawerItem:

<NavigationDrawer class="max-w-[300px]">
  <NavigationDrawerItem icon={() => <Home />}>Home</NavigationDrawerItem>
  <NavigationDrawerItem icon={() => <Settings />}>Settings</NavigationDrawerItem>
</NavigationDrawer>

Setting active location

By default NavigationDrawerItem will listen to active class, but you could also supply active prop:

Home

Settings

<NavigationDrawer class="max-w-[300px]">
  <NavigationDrawerItem active icon={() => <Home />}>
    Home
  </NavigationDrawerItem>
  <NavigationDrawerItem icon={() => <Settings />}>Settings</NavigationDrawerItem>
</NavigationDrawer>

Adding adornments

You could also supply startAdornment prop to add leading components:

Home

Settings

<NavigationDrawer
  class="max-w-[300px]"
  startAdornment={() => (
    <>
      <IconButton variant="standard">
        <Menu />
      </IconButton>
      <FAB variant="tertiary" icon={() => <Plus />}>
        Add
      </FAB>
    </>
  )}
>
  <NavigationDrawerItem icon={() => <Home />}>Home</NavigationDrawerItem>
  <NavigationDrawerItem icon={() => <Settings />}>Settings</NavigationDrawerItem>
</NavigationDrawer>