Developer mode
Opens components on the React tab by default.
Your bookmarks

NavigationBar / React

Also known as toolbar, navbar

Wraps top-level navigation and branding.

To implement NavigationBar component into your project you’ll need to add the import:

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

After adding import into your project you can use it simply like:

<NavigationBar onMenuOpen={handleDrawerOpen}>
  <LinkList direction="row">
    <TextLink> Link 1 </TextLink>
    <TextLink> Link 2 </TextLink>
    <TextLink> Link 3 </TextLink>
  </LinkList>
</NavigationBar>

Props

Table below contains all types of the props available in the NavigationBar component.

Name Type Default Description
children React.Node The content of the NavigationBar.
dataTest string Optional prop for testing purposes.
onMenuOpen () => void | Promise Function for handling onClick event on HamburgerMenu icon. If null, the HamburgerMenu won’t appear.
onHide () => void | Promise Function for handling event when the NavigationBar disappears.
onShow () => void | Promise Function for handling event when the NavigationBar appears.