Skip to content
UI Kit
Accent color

Navbars with mobile menu and mega menu

Headers for sites and apps, each with its own phone menu.

9 variants
Switch category

Which header for which site

The navbar sits on every page, so it has to be quick to read and quick to use. Each of the nine headers here brings its own phone menu, built as a real dialog with focus kept inside, so visitors on a phone get the same paths as on a desktop.

Simple and Minimal fit sites with up to six links. Centered logo suits brands, restaurants and boutiques. Floating glass and Transparent on scroll sit over a hero picture and gain a background once the page moves. Mega menu is for many products or services in groups, With search for shops and docs, With announcement for a launch or a sale. App header carries account and actions inside an application.

Keep the main links to five or six and put the one action you care about at the right as a button. Mark the current page, every variant reads it from the active prop and sets aria-current. Test the phone menu with the keyboard once, Tab should stay inside until you close it.

Navbar

Details

What Navbar brings along, read from the registry and the source.

Area
Layout
Variants
9
Version
1.0.0 · since 1.0.0
File
components/ui/navbar.tsx
Brings along
utilskitbuttonicon
npm packages
None
Languages
English and German, 15 texts of its own
Studio
All 9 variants editable
In collections
SaaS landing page
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The NavbarProps interface from components/ui/navbar.tsx, with the comments from the code.

  • variantoptional
    NavbarVariant

    simplecentered-logofloating-pill-glasswith-mega-menuwith-announcementtransparent-on-scrollwith-searchapp-headerminimal

  • brandrequired
    { name: string; href?: string; logo?: React.ReactNode }
  • linksoptional
    NavLink[]
  • secondaryLinksoptional
    NavLink[]

    centered-logo: the links right of the logo

  • primaryActionoptional
    NavAction
  • secondaryActionoptional
    NavAction

    Usually "Sign in", shown as a quiet link

  • announcementoptional
    { tag?: string; label: string; href: string; linkLabel?: string }

    with-announcement: the bar above the navigation

  • searchoptional
    { placeholder?: string; suggestions: NavItem[] }

    with-search: placeholder and the quick links shown in the dropdown

  • appoptional
    { breadcrumb: { label: string; href: string }[]; tabs: NavLink[]; user: { name: string; email: string }; userMenu: NavItem[]; notifications?: number; }

    app-header: path, tabs and the signed-in person

  • contactoptional
    { label: string; value: string; href: string }[]

    minimal: a line in the full screen menu, e.g. an address or an email

Built-in texts

Navbar writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 15 texts
openEnglish Open menuGerman Menü öffnen
closeEnglish Close menuGerman Menü schließen
closeShortEnglish CloseGerman Schließen
mainEnglish MainGerman Hauptnavigation
menuEnglish MenuGerman Menü
searchEnglish SearchGerman Suchen
searchShortEnglish Search…German Suchen…
noResultsEnglish Nothing found. Try a shorter word.German Nichts gefunden. Versuch ein kürzeres Wort.
quickLinksEnglish Quick linksGerman Schnellzugriff
notificationsEnglish NotificationsGerman Benachrichtigungen
accountEnglish AccountGerman Konto
dismissEnglish Dismiss announcementGerman Hinweis ausblenden
homeEnglish HomeGerman Startseite
helpEnglish HelpGerman Hilfe
contactEnglish Get in touchGerman Kontakt aufnehmen

Accessibility

Read from the source of the component.

  • Navbar handles the keys Escape, Enter, Arrow up, Arrow down, Arrow left, Arrow right, Home, End, Tab and Space itself.
  • Sets aria-activedescendant, aria-autocomplete, aria-controls, aria-current, aria-expanded, aria-haspopup, aria-label, aria-modal and aria-selected, so screen readers announce purpose and state.
  • Uses the roles combobox, dialog, listbox, menu, menuitem and option.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Moves with the scroll, its progress follows the position on the page.
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 29 places in the code switch motion off then.

Frequent questions

How do I install Navbar?

With aiw add @ai-website/navbar. The command puts components/ui/navbar.tsx into your project, the code is yours from then on. It brings along button and icon. It needs no further npm packages.

Which variants does Navbar have?

9 variants, Simple, Centered logo, Floating glass, Mega menu, With announcement, Transparent on scroll, With search, App header and Minimal. You pick one with the variant prop, for example variant="centered-logo".

Can I translate the texts of Navbar?

Yes. Navbar carries 15 texts of its own in English and German, such as “Open menu”, “Close menu” and “Close”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Navbar?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Navbar with aiw_components and install it with aiw_add @ai-website/navbar. Name the variant in your prompt, for example variant="simple", and the assistant writes your content straight into the props.

Can I adjust Navbar without code?

Yes, in the Studio. All 9 variants are editable there, texts, lists and switches. The Studio writes the matching Navbar code to copy.

Similar components

More from Layout, the same area of the kit.

Often combined with

Sections that usually sit next to Navbars on a page.

Often searched

Jump to

Copied to the clipboard