Navbar
The top bar in four scroll modes — static, sticky, hide on scroll, transparent — with mega menu, search, overflow and a mobile drawer.
Modes and features
Four ways for the bar to behave on scroll, and four features that cover large and small screens. Every example below scrolls in its own window, so the bar reacts as it would on a page.
| Mode | Purpose | Benefit | Best for |
|---|---|---|---|
| Sticky | Stays at the top; lifts with a shadow once the page scrolls. | Navigation is always one reach away; the default. | Apps and dashboards |
| Static | Scrolls away with the page. | Nothing ever covers the content. | Long reading pages, print views |
| Hide on scroll | Slides away while you read down, returns when you scroll up. | Full height for content, the bar a flick away. Stays while it holds focus or a menu is open; off with reduced motion. | Content-heavy pages on small screens |
| Transparent to solid | Translucent over a hero, solid once you scroll. | The hero reads as one surface; the bar stays readable through blur and a color layer. | Landing and marketing pages |
| Mega menu | A panel of links under a top-level entry. | Many destinations, grouped and described — a disclosure, so links stay links. | Products, resources |
| Search and command | An inline search field and a ⌘K palette trigger. | Two ways to every page (WCAG 2.4.5); the field grows without pushing the icons. | Apps with many pages |
| Overflow | Links that do not fit move into More. | Fourteen links never break the bar on a laptop. | Products with many areas |
| Mobile drawer | Below 36rem the links move into a drawer. | No sideways scrolling at 320 px (WCAG 1.4.10); focus is kept inside until it closes. | Every app on a phone |
Usage
Installation
npm install @wunderui/reactThen import what you need:
import {
Navbar,
NavbarLink,
NavbarLinkProps,
NavbarMenu,
NavbarMenuLink,
NavbarMode,
NavbarProps,
NavbarSearch,
NavbarSearchField,
NavbarSearchProps,
} from "@wunderui/react"Examples
Sticky
The default. The bar stays at the top and gains a shadow once the window scrolls (box-shadow, duration-fast, ease-entrance). Click the links — the current page gets aria-current.
Overview
€48.2K, up 12% against August. Scroll the window to see how the bar behaves.
17 tasks due this week, 3 of them overdue. Scroll the window to see how the bar behaves.
Anna and 4 others updated Roadmap today. Scroll the window to see how the bar behaves.
Version 2.4 is ready for review. Scroll the window to see how the bar behaves.
4.6 average from 128 reviews. Scroll the window to see how the bar behaves.
99.98% over the last 30 days. Scroll the window to see how the bar behaves.
Static
In the flow of the page: it scrolls away, and nothing ever covers the content.
Overview
€48.2K, up 12% against August. Scroll the window to see how the bar behaves.
17 tasks due this week, 3 of them overdue. Scroll the window to see how the bar behaves.
Anna and 4 others updated Roadmap today. Scroll the window to see how the bar behaves.
Version 2.4 is ready for review. Scroll the window to see how the bar behaves.
4.6 average from 128 reviews. Scroll the window to see how the bar behaves.
99.98% over the last 30 days. Scroll the window to see how the bar behaves.
Hide on scroll
Slides up while you scroll down (translate only, duration-base, ease-exit) and back while you scroll up (ease-entrance). Ignores jitter under 6 px, never hides in the first bar-height, stays while it holds focus or a menu is open, and becomes plain sticky under prefers-reduced-motion.
Overview
€48.2K, up 12% against August. Scroll the window to see how the bar behaves.
17 tasks due this week, 3 of them overdue. Scroll the window to see how the bar behaves.
Anna and 4 others updated Roadmap today. Scroll the window to see how the bar behaves.
Version 2.4 is ready for review. Scroll the window to see how the bar behaves.
4.6 average from 128 reviews. Scroll the window to see how the bar behaves.
99.98% over the last 30 days. Scroll the window to see how the bar behaves.
Transparent to solid
Over the hero the bar is a translucent color layer with one blur (never opacity on the bar, it would kill the blur); once the window scrolls it turns solid with border and shadow.
Release 2.4
Ship dashboards faster
The bar is translucent with a blur over the hero, and turns solid once you scroll.
€48.2K, up 12% against August. Scroll the window to see how the bar behaves.
17 tasks due this week, 3 of them overdue. Scroll the window to see how the bar behaves.
Anna and 4 others updated Roadmap today. Scroll the window to see how the bar behaves.
Version 2.4 is ready for review. Scroll the window to see how the bar behaves.
4.6 average from 128 reviews. Scroll the window to see how the bar behaves.
99.98% over the last 30 days. Scroll the window to see how the bar behaves.
Mega menu
A disclosure, not a menu: the trigger is a button with aria-expanded, the panel holds real links. Hover opens after 150 ms and a sibling switches at once; Escape closes and returns focus, and hover cannot reopen until the pointer has left.
Hover Products (150 ms intent) or click it. Tab walks into the panel, Escape closes it and returns focus.
Search and command
search holds an inline field in a search landmark that widens from its icon (duration-fast); command holds the ⌘K trigger for the command palette.
The search icon widens into a field; ⌘K / Ctrl+K (while you are inside this example) or the button opens the command palette.
Overflow
Links that do not fit the bar move into More, a list of links rather than a menu. The split is measured on every resize.
Current page: Overview. Links that do not fit move into More; narrow the window to see more of them move.
Mobile drawer
Below 36rem the links and menus move into a drawer behind the menu button: a modal dialog that keeps focus inside and returns it on close. Mega menus become disclosures there.
Overview
€48.2K, up 12% against August. Scroll the window to see how the bar behaves.
17 tasks due this week, 3 of them overdue. Scroll the window to see how the bar behaves.
Anna and 4 others updated Roadmap today. Scroll the window to see how the bar behaves.
Version 2.4 is ready for review. Scroll the window to see how the bar behaves.
4.6 average from 128 reviews. Scroll the window to see how the bar behaves.
99.98% over the last 30 days. Scroll the window to see how the bar behaves.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
App top bar
Logo, links, search and the user menu in one bar.
Features mega menu
A wide menu with grouped links for a features navigation.