NAVIGATION

Top navigation

Draft

A horizontal navigation bar for second-level navigation within a product area or section.

Usage

Common alternative names

Horizontal nav, nav bar, menu bar

Usage guidelines coming soon.

Specs

Specs coming soon.

Content

Content guidelines coming soon.

Status & changelog

Status & changelog coming soon.

Code

---

Usage

import { TopNavigation } from '@arch-ui/components';

function ProjectNav() {
  return (
    <TopNavigation
      items={[
        { label: 'Overview', href: '/project/overview', active: true },
        { label: 'Analytics', href: '/project/analytics' },
        { label: 'Settings', href: '/project/settings' },
      ]}
    />
  );
}

---

Expected props

Prop	Type	Default	Description
items	TopNavItem[]	--	Array of navigation links.
className	string	--	Additional class names.

TopNavItem

Prop	Type	Description
label	string	Visible text for the link.
href	string	Destination URL.
active	boolean	When true, the item is styled as the current page.
disabled	boolean	When true, the item is non-interactive.

---

Anatomy

1. Container -- a horizontal bar, often with a bottom border, spanning the content width.
2. Nav items -- a row of text links or buttons. The active item is indicated by an underline or accent colour.
3. Overflow (optional) -- when items exceed the available width, a horizontal scroll or "More" dropdown handles the overflow.

---

When to use

• Second-level navigation within a section that already has a global Navigation Header.
• Switching between views of the same data set (e.g., list view vs. grid view), when Tabs are too heavyweight.

---

When not to use

• Primary site-wide navigation. Use Navigation Header.
• Content that benefits from persistent panels. Use Tabs.
• More than seven to eight items. Consider a different information architecture or use overflow handling.

---

Accessibility

• Renders inside a <nav> landmark with a descriptive aria-label (e.g., "Project navigation").
• The active item carries aria-current="page".
• Items are rendered as anchor elements or buttons, ensuring they are keyboard focusable.
• Disabled items have aria-disabled="true" and are excluded from the tab order.