NavigationRail

Navigation rails provide access to destinations in your app in medium sized devices.

Basic usage

The NavigationRail must be composed with NavigationItem:

<NavigationRail>
  <NavigationItem icon={() => <Home />}>Home</NavigationItem>
  <NavigationItem icon={() => <Settings />}>Settings</NavigationItem>
</NavigationRail>

Setting active location

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

Home

Settings

<NavigationRail>
  <NavigationItem active icon={() => <Home />}>
    Home
  </NavigationItem>
  <NavigationItem icon={() => <Settings />}>Settings</NavigationItem>
</NavigationRail>

Adding adornments

You could also supply startAdornment prop to add leading components:

Home

Settings

<NavigationRail
  startAdornment={() => (
    <>
      <IconButton variant="standard">
        <Menu />
      </IconButton>
      <FAB variant="tertiary" icon={() => <Plus />} />
    </>
  )}
>
  <NavigationItem icon={() => <Home />}>Home</NavigationItem>
  <NavigationItem icon={() => <Settings />}>Settings</NavigationItem>
</NavigationRail>