How many items should a navbar have?

Only the few users need most — usually four to seven top-level items. Group the rest under dropdowns or move them to the footer. An overloaded navbar makes the important links harder to find.

Are Vireya's navbar dropdowns accessible?

Yes. They're built on the @vireya/ui NavigationMenu primitive, which provides correct menu semantics, keyboard operation and focus management rather than relying on hover alone.

All categories

navbar/*

Navbars

Page header with the @vireya/ui NavigationMenu primitive — flat or with dropdowns.

2 variants

Understanding Navbars

The navbar is persistent wayfinding — it tells visitors where they are, where they can go, and keeps the primary action one click away. Because it appears on every page, small clarity wins compound across the whole site.

Vireya's navbars are built on the @vireya/ui NavigationMenu primitive, in a flat layout or with accessible dropdowns.

When to use

Top-level site or app navigation.
Surfacing a persistent primary action (sign up, get started).
Grouping deeper navigation under accessible dropdown menus.

When to avoid

Overloading the bar with every link — prioritise the few that matter.
Deep nested menus where a dedicated navigation page would serve better.

Best practices

Keep top-level items to the handful users need most.
Make the current location visible in the nav.
Give the primary action distinct, higher-emphasis styling.
Ensure dropdowns are operable by keyboard and touch, not hover alone.

Accessibility

Use a nav landmark and proper menu semantics (the NavigationMenu primitive handles this).
Support keyboard navigation and visible focus states throughout.
Don't gate menu access behind hover-only interactions.

Frequently asked questions

How many items should a navbar have?: Only the few users need most — usually four to seven top-level items. Group the rest under dropdowns or move them to the footer. An overloaded navbar makes the important links harder to find.
Are Vireya's navbar dropdowns accessible?: Yes. They're built on the @vireya/ui NavigationMenu primitive, which provides correct menu semantics, keyboard operation and focus management rather than relying on hover alone.