Navbar

A navbar anchored to a side of the screen.

import {
  Navbar,
  NavbarBody,
  NavbarFooter,
  NavbarGroup,
  NavbarItemButton,
} from "swash/Navbar";
import {
  IoCreateOutline,
  IoAddCircleOutline,
  IoRemoveCircleOutline,
  IoCogOutline,
} from "swash/Icon";

() => (
  <Navbar aria-label="My nav" side="left" variant="dark">
    <NavbarBody>
      <NavbarGroup>
        <NavbarItemButton title="Create article">
          <a href="#">
            <IoCreateOutline />
          </a>
        </NavbarItemButton>
      </NavbarGroup>
      <NavbarGroup>
        <NavbarItemButton>
          <a href="#">
            <IoAddCircleOutline />
          </a>
        </NavbarItemButton>
        <NavbarItemButton>
          <a href="#">
            <IoRemoveCircleOutline />
          </a>
        </NavbarItemButton>
      </NavbarGroup>
    </NavbarBody>
    <NavbarFooter>
      <NavbarGroup>
        <NavbarItemButton>
          <a href="#">
            <IoCogOutline />
          </a>
        </NavbarItemButton>
      </NavbarGroup>
    </NavbarFooter>
  </Navbar>
);

Usage

Three props are required on the Navbar component:

side: specify if the navbar is displayed at the left or at the right of the screen to ensure the correct positionning of tooltips.
variant: choose the style of the navbar, "dark" or "light".
aria-label: for accessibility concerns it is important to labelize the navbar.

Three sections can be composed:

NavbarHeader: at the top, always displayed
NavbarBody: at the top, scrollable
NavbarFooter: at the bottom, always displayed

Use NavbarGroup to split the section in several groups and separate items.

Finally, use NavbarItemButton to create navbar items. It automatically forwards its props to its only child. Use tooltip property to display a tooltip on hover.

The state active is automatically when your component is accessible. aria-pressed="true", aria-expanded="true", aria-current="page" trigger the active state.