Navigation

The navigation component is meant for giving a good overview of the pages that exist and for moving between them. The currently visited page should always be highlighted. For that, we have a custom link component:

NavigationLink

This link component can be used in any navigation bar and supports two display styles: the icon can be either inlined with the label or stacked on top. We always want to show a visual indication of the linked item, so passing an icon is required.

Props

Depending on the use case, two types of navigation bars are supported.

Bottom Navigation

The bottom navigation is meant especially for mobile layouts with big icons that can easily be touched. It should always be displayed in a sticky position at the bottom of the screen.

<BottomNavigation>
  <NavigationLink
    href="/"
    icon={<HouseIcon scale="medium" />}
    isActive={true}
    label="Home"
  />
  <NavigationLink
    href="/"
    icon={<CheckShieldIcon scale="medium" />}
    label="Contracts"
  />
  <NavigationLink
    href="/"
    icon={<InformationCircleIcon scale="medium" />}
    label="Service"
  />
</BottomNavigation>

Tab Navigation

The tab navigation is meant for wider screens, like tablet and desktop, where the icon and link title can be inlined.

<TabNavigation>
  <NavigationLink
    href="/"
    icon={<HouseIcon scale="medium" />}
    inline={true}
    label="Home"
  />
  <NavigationLink
    href="/"
    icon={<CheckShieldIcon scale="medium" />}
    inline={true}
    isActive={true}
    label="Contracts"
  />
  <NavigationLink
    href="/"
    icon={<InformationCircleIcon scale="medium" />}
    inline={true}
    label="Service"
  />
</TabNavigation>