order
NavBar
Top bar with brand, links, search and people.
Site headerFour links; Projects opens a menu; narrow it and the rest fold into More
Tideline
TodayProjectsCalendarPeopleMore
MCJW
TodayProjectsCalendarPeopleReportsRota exportFilesSettingsMore
TodayProjectsCalendarPeopleReportsRota exportFilesSettingsMore
TodayProjectsCalendarPeopleReportsRota exportFilesSettingsMenu
OverviewTasksFilesPeopleBudgetMore
In context
Desktop and phoneThe header on a browser window; project sections on a phone, folding into More
tideline.app/projects
Tideline
TodayProjectsCalendarMore
Projects
Harbour rebrand
On track
Tideline mobile
Review
Crew interviews
Late
Harbour rebrand
OverviewTasksFilesPeopleBudgetMore
Harbour homepage
Maya · Design
Icon audit
Maya · Design
Props
| Prop | Type | Required | Default |
|---|---|---|---|
items | NavBarItem[] | Yes | — |
renderLink | ((props: { href: string; children: ReactNode; className?: string | undefined; onClick?: (() => void) | undefined; "aria-current"?: "page" | undefined; "data-rebar-state"?: "current" | undefined; }) => ReactNode) | undefined | No | — |
renderIcon | ((icon: string) => ReactNode) | undefined | No | — |
moreLabel | string | undefined | No | More |
aria-label | string | undefined | No | Main |
className | string | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Overflow
The bar measures its own width and moves the links that no longer fit into a trailing "More" popover, instead of wrapping or clipping. An item with megaMenu opens a panel of grouped links instead of navigating.
Accessibility
A <nav> of real links (renderLink for a framework router); the overflow trigger and any mega menu are real buttons with a popover.
data-rebar-* attributes
data-rebar-component="navbar"; data-rebar-part="more" on the overflow trigger.