Top Navigation

🧭 When to Use Top Navigation

Use Top Navigation when:

• Your product has a small set of primary sections (2–6)

• You want a clean, horizontal layout without side menus

• You need to surface account access, actions, or search in a prominent area

Avoid using Top Navigation when:

• You have multiple levels of navigation (use Side Navigation or combined layouts)

• The app is focused on a single flow or screen — use Tab Bars or inline menus

🧩 Top Navigation Structure

The full Top Navigation component includes:

• Nav Items – The primary routes (e.g., Home, Features, Pricing)

• Menu Dropdowns – Hover or click-activated sub-navigation menus

• Action Buttons – e.g., “Sign in,” “Start free trial,” notifications

• User Avatar / Auth Control – For profile access or login/logout

All elements are arranged using layout tokens for spacing, alignment, and responsive behavior.

🔢 Nav Item States

Top nav items support the following status variants:

• Default – Inactive, resting state

• Hover – Color shift or underline appears on hover

• Selected – Active route, visually distinct (bold, underline, filled)

Each item can be styled as:

• Filled – Background highlight (used when nav blends into UI)

• Subtle – Minimal appearance with emphasis on text only

Toggle status and type using Figma variants.

🔽 Navigation Menu Dropdowns

Some nav items can include a Menu Dropdown, which reveals sub-navigation items when hovered or clicked.

Dropdowns are ideal for:

• Multi-part documentation

• Grouped product categories

• Settings and profile controls

Each dropdown supports:

• Hover or click trigger

• Sub-item highlight states (hover, selected)

• Optional headers or grouping logic

Menus are styled with spacing, shadows, and border radius consistent with your design system tokens.

🔐 Support Bar Variants

Top Navigation can include optional support bars depending on application state.

Common variants:

• Logged Out – Displays sign in, register, or marketing links

• Logged In – Shows user avatar, notifications, account dropdown, or teams

• Guest Mode – Lightweight experience for anonymous browsing

These support bars are nested into the main Top Nav component as toggleable sections, letting you easily switch states in Figma or code.

Each bar can include:

• Announcement banners

• Utility links (e.g., Help, Docs, Language)

• Secondary CTAs (e.g., Upgrade Plan, Invite)

♿ Accessibility Considerations

From a design perspective:

• Keep target sizes large enough (min 44px height)

• Clearly distinguish active vs hover vs selected states

• Use consistent iconography and spacing for menu vs static items

From a code perspective (if implemented):

• Wrap with nav role="navigation" and aria-label="Main navigation"

• Use aria-current="page" on selected nav items

• For dropdowns, use aria-haspopup="true", aria-expanded, and aria-controls to support keyboard navigation

• Ensure all interactive elements are keyboard and screen reader accessible

✅ Best Practices

• Limit top nav items to 5–6 max — overflow into a “More” menu if needed

• Keep your brand/logo aligned left, actions (e.g., login/profile) aligned right

• Don’t over-nest — use one level of dropdown only

• Visually group related elements (e.g., avatar + name + dropdown arrow)

• Maintain consistency in hover/select indicators across top nav and side nav