README.md

TopNav ^{_{(Top Navigation)}}

The primary navigation across the top of the screen. This piece contains the product name/icon, search bar, project/account switcher, and avatar.

Read more about when and how to use the TopNav component on the internal wiki.

Getting started

Installation

Install with Yarn

yarn add @hig/top-nav @hig/theme-context @hig/theme-data

Or with npm

npm install @hig/top-nav

Import

Import the component:

import TopNav from '@hig/top-nav';

Basic usage

<TopNav logo={<Logo />} />

You can set right interactions as follows using the predefined actions ProfileAction, HelpAction and NotificationsAction:

<TopNav
  logo={<Logo />}
  rightActions={
    <Interactions>
      <NotificationsAction />
      <HelpAction />
      <ProfileAction />
    </Interactions>
  }
/>

You can create a custom action by using the NavAction component and adding it to a right interaction, be sure to set the title and icon (the default is the list icon):

<TopNav
  logo={<Logo />}
  rightActions={
    <Interactions>
      <NavAction title="Custom Nav Action" icon={<Icon/>}>
        <div>Your Content here</div>
      </NavAction>
    </Interactions>
  }
/>