NavigationBar

Also known as toolbar, navbar

Wraps top-level navigation and branding.

If your users can’t navigate through your app, they’ll never find your amazing designs. Present them with a clear and consistent means of finding their way and they’ll keep coming back for more.

Use a navigation bar to wrap your top-level navigation and branding such as a logo and keep everything in a place your users will expect.

Component status

Figma

Released

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Docs

Released

Native bar (design first for native mobile)
Back button: allows users to go back to a previous screen; title: gives users context for where they are; action: adds an action for the entire screen.

Responsive bar (then make a responsive design)
Home button: enables users to navigate to the top level; dropdown: optionally opens additional nav items; link list: optionally places multiple buttons next to one another; menu: optionally opens additional options.

Guidelines

Keep app bar clean

In mobile apps, the navigation bar can’t hold much. It’s not the right place to hold menus or other complicated options.

If you want to add links to options in an app, consider using a tab bar in the footer.

Vary items by context

On large screens, it can help to have full ideas written out. Use clear nouns to describe what each menu item means.

Help

English

Careers

Get help now

Change the interface language

Look for a job

import ButtonLink from "@kiwicom/orbit-components/lib/ButtonLink";
import LinkList from "@kiwicom/orbit-components/lib/LinkList";
import NavigationBar from "@kiwicom/orbit-components/lib/NavigationBar";
import TextLink from "@kiwicom/orbit-components/lib/TextLink";
import Stack from "@kiwicom/orbit-components/lib/Stack";

() => (
  <NavigationBar>
    <Stack direction="row" align="center" justify="center">
      <ButtonLink href="https://orbit.kiwi">
        <img
          src="https://orbit.kiwi/files/2019/08/cropped-OrbitLogo-1.png"
          alt="Orbit by Kiwi.com"
          height="40px"
        />
      </ButtonLink>
      <LinkList direction="row">
        <TextLink type="secondary">Travel</TextLink>
        <TextLink type="secondary">Rooms</TextLink>
        <TextLink type="secondary">Careers</TextLink>
      </LinkList>
      <Stack inline>
        <LinkList direction="row">
          <TextLink type="secondary">English</TextLink>
          <TextLink type="secondary">Help</TextLink>
          <TextLink type="secondary">My account</TextLink>
        </LinkList>
      </Stack>
    </Stack>
  </NavigationBar>
)

On smaller screens, there’s not space for many words. Use icons to communicate the main ideas. Just remember to include text equivalents so everyone knows what the items mean.

When using icons, keep them aligned to the side without large gaps in between.

import ButtonLink from "@kiwicom/orbit-components/lib/ButtonLink";
import CountryFlag from "@kiwicom/orbit-components/lib/CountryFlag";
import NavigationBar from "@kiwicom/orbit-components/lib/NavigationBar";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import AirplaneTakeoff from "@kiwicom/orbit-components/lib/icons/AirplaneTakeoff";
import Accommodation from "@kiwicom/orbit-components/lib/icons/Accommodation";
import Partners from "@kiwicom/orbit-components/lib/icons/Partners";
import QuestionCircle from "@kiwicom/orbit-components/lib/icons/QuestionCircle";
import AccountCircle from "@kiwicom/orbit-components/lib/icons/AccountCircle";

() => (
  <NavigationBar>
    <Stack direction="row" align="center" justify="center">
      <ButtonLink href="https://orbit.kiwi">
        <div
          style={{
            maxWidth: "40px",
            overflow: "hidden",
          }}
        >
          <img
            src="https://orbit.kiwi/files/2019/08/cropped-OrbitLogo-1.png"
            alt="Orbit by Kiwi.com"
            height="40px"
          />
        </div>
      </ButtonLink>
      <ButtonLink
        type="secondary"
        iconLeft={<AirplaneTakeoff />}
        title="Travel"
      />
      <ButtonLink
        type="secondary"
        iconLeft={<Accommodation />}
        title="Rooms"
      />
      <ButtonLink
        type="secondary"
        iconLeft={<Partners />}
        title="Careers"
      />
      <Stack justify="end" inline>
        <ButtonLink
          type="secondary"
          iconLeft={<CountryFlag code="gb" />}
          title="English"
        />
        <ButtonLink
          type="secondary"
          iconLeft={<QuestionCircle />}
          title="Help"
        />
        <ButtonLink
          type="secondary"
          iconLeft={<AccountCircle />}
          title="My account"
        />
      </Stack>
    </Stack>
  </NavigationBar>
)

Collapse menus in smaller contexts

When you have complicated navigation but only limited space, use progressive disclosure. Keep most items hidden at first and offer dropdowns and drawers to reveal them.

Make sure users know how to open the items. Use common patterns like a menu icon to make it clear what is possible.

import ButtonLink from "@kiwicom/orbit-components/lib/ButtonLink";
import CountryFlag from "@kiwicom/orbit-components/lib/CountryFlag";
import Drawer from "@kiwicom/orbit-components/lib/Drawer";
import useMediaQuery from "@kiwicom/orbit-components/lib/useMediaQuery";
import LinkList from "@kiwicom/orbit-components/lib/LinkList";
import NavigationBar from "@kiwicom/orbit-components/lib/NavigationBar";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import TextLink from "@kiwicom/orbit-components/lib/TextLink";
import AirplaneTakeoff from "@kiwicom/orbit-components/lib/icons/AirplaneTakeoff";
import Accommodation from "@kiwicom/orbit-components/lib/icons/Accommodation";
import Partners from "@kiwicom/orbit-components/lib/icons/Partners";
import QuestionCircle from "@kiwicom/orbit-components/lib/icons/QuestionCircle";
import AccountCircle from "@kiwicom/orbit-components/lib/icons/AccountCircle";

() => {
  const [showDrawer, setShowDrawer] = React.useState(false)
  const { isLargeMobile } = useMediaQuery()
  return (
    <>
      {showDrawer && (
        <Drawer
          onClose={() => {
            setShowDrawer(false)
          }}
          shown={showDrawer}
        >
          <LinkList>
            <TextLink type="secondary">English</TextLink>
            <TextLink type="secondary">Help</TextLink>
            <TextLink type="secondary">My account</TextLink>
          </LinkList>
        </Drawer>
      )}
      <NavigationBar
        onMenuOpen={isLargeMobile ? undefined : () => setShowDrawer(true)}
      >
        <Stack
          direction="row"
          align="center"
          justify={isLargeMobile ? "center" : "start"}
        >
          <ButtonLink href="https://orbit.kiwi">
            <div
              style={{
                maxWidth: "40px",
                overflow: "hidden",
              }}
            >
              <img
                src="https://orbit.kiwi/files/2019/08/cropped-OrbitLogo-1.png"
                alt="Orbit by Kiwi.com"
                height="40px"
              />
            </div>
          </ButtonLink>
          <ButtonLink
            type="secondary"
            iconLeft={<AirplaneTakeoff />}
            title="Travel"
          />
          <ButtonLink
            type="secondary"
            iconLeft={<Accommodation />}
            title="Rooms"
          />
          <ButtonLink
            type="secondary"
            iconLeft={<Partners />}
            title="Careers"
          />
          {isLargeMobile && (
            <Stack justify="end" inline>
              <ButtonLink
                type="secondary"
                iconLeft={<CountryFlag code="gb" />}
                title="English"
              />
              <ButtonLink
                type="secondary"
                iconLeft={<QuestionCircle />}
                title="Help"
              />
              <ButtonLink
                type="secondary"
                iconLeft={<AccountCircle />}
                title="My account"
              />
            </Stack>
          )}
        </Stack>
      </NavigationBar>
    </>
  )
}

Related components

Drawer

For more complicated navigation, use a drawer to keep it outside the main user flow.

Tabs

For navigation within a page or for links in an app footer, use tabs.

LinkList

For lists of navigation links (within a navigation bar or not), use a link list.