Skip to main content

Local Navigation

Navigation component for sections or pages.

Appearance​

Use the variant prop to display primary or secondary variant of the component.

Primary​

Mainly for use with sidebars.

http://localhost:3000
<LocalNavigation css={{ flex: 1 }}>
  <LocalNavigationItem>Overview</LocalNavigationItem>
  <LocalNavigationItem>Lanes</LocalNavigationItem>
  <LocalNavigationItem>Carriers</LocalNavigationItem>
  <LocalNavigationItem>Containers</LocalNavigationItem>
</LocalNavigation>

Secondary​

Mainly for use on white pages as a navigation in header.

http://localhost:3000
<LocalNavigation css={{ flex: 1 }} variant="secondary">
  <LocalNavigationItem>Overview</LocalNavigationItem>
  <LocalNavigationItem>Lanes</LocalNavigationItem>
  <LocalNavigationItem>Carriers</LocalNavigationItem>
  <LocalNavigationItem>Containers</LocalNavigationItem>
</LocalNavigation>

Usage​

Selected​

Use the isSelected prop to indicate current location.

http://localhost:3000
<LocalNavigation css={{ flex: 1 }}>
  <LocalNavigationItem isSelected>Overview</LocalNavigationItem>
  <LocalNavigationItem>Lanes</LocalNavigationItem>
  <LocalNavigationItem>Carriers</LocalNavigationItem>
  <LocalNavigationItem>Containers</LocalNavigationItem>
</LocalNavigation>

With dropdown button​

Use the LocalNavigationDropdownItem component to display a button item with dropdown.

http://localhost:3000
<LocalNavigation>
  <LocalNavigationDropdownItem title="Parent section">
    <DropdownMenu>
      <DropdownItem key="Profile">Profile</DropdownItem>
      <DropdownItem key="Search">Search</DropdownItem>
    </DropdownMenu>
  </LocalNavigationDropdownItem>
  <LocalNavigationItem>Overview</LocalNavigationItem>
  <LocalNavigationItem>Lanes</LocalNavigationItem>
  <LocalNavigationItem>Carriers</LocalNavigationItem>
  <LocalNavigationItem>Containers</LocalNavigationItem>
</LocalNavigation>

Props​

LocalNavigation Props​

as?The root element to be rendered

LocalNavigationDropdownItem Props​

as?The root element to be rendered

LocalNavigationItem Props​

as?The root element to be rendered