Header Navigation

Overview

Header Navigation is a horizontal navigation component placed at the top of the page. It supports a logo, menu items with or without dropdowns, and action buttons on the right side.

Type: Default

A’raf DS

HomeProducts ▾Solutions ▾About

Type: Standard (with dropdown)

A’raf DS

HomeProducts ▾Solutions ▾About

Design System

Build consistent UIs with our design tokens and components.

Component Library

Reusable, accessible components for your product.

Figma Kit

Design-ready assets and templates in Figma.

Installation

npm install @araf-ds/core

yarn add @araf-ds/core

pnpm add @araf-ds/core

Usage

import { HeaderNavigation, NavItem, NavDropdown, NavigationActions } from "@araf-ds/core";

export default function App() {
  return (
    <HeaderNavigation type="standard">
      <NavItem href="/home">Home</NavItem>
      <NavDropdown label="Products">
        <NavDropdown.Item href="/design-system" description="Build consistent UIs">
          Design System
        </NavDropdown.Item>
        <NavDropdown.Item href="/components" description="Reusable components">
          Component Library
        </NavDropdown.Item>
      </NavDropdown>
      <NavItem href="/about">About</NavItem>

      <NavigationActions slot="actions">
        <Button variant="secondary-gray">Sign In</Button>
        <Button variant="primary">Get Started</Button>
      </NavigationActions>
    </HeaderNavigation>
  );
}

Type Variants

Header Navigation has 7 layout types that determine how menu items and sub-menus are displayed.

Logo and nav items aligned in the center, CTA button on the right. No dropdown.

A’raf DS

HomeProductsSolutionsAbout

<HeaderNavigation type="default">
  <NavItem href="/home">Home</NavItem>
  <NavItem href="/products">Products</NavItem>
  <NavItem href="/solutions">Solutions</NavItem>
  <NavItem href="/about">About</NavItem>
</HeaderNavigation>

The dropdown menu appears as a small card (bordered, rounded) below the clicked nav item. Suitable for menus with a limited number of options.

A’raf DS

HomeProducts ▾Solutions ▾About

Design System

Build consistent UIs with design tokens.

Component Library

Reusable, accessible components.

Figma Kit

Design-ready assets and templates.

<HeaderNavigation type="standard">
  <NavDropdown label="Products">
    <NavDropdown.Item href="/ds" description="Build consistent UIs">Design System</NavDropdown.Item>
    <NavDropdown.Item href="/lib" description="Reusable components">Component Library</NavDropdown.Item>
    <NavDropdown.Item href="/figma" description="Design-ready assets">Figma Kit</NavDropdown.Item>
  </NavDropdown>
</HeaderNavigation>

Identical to Standard, but each item in the dropdown is accompanied by an icon on the left for easier visual identification.

<HeaderNavigation type="standard-with-icon">
  <NavDropdown label="Products">
    <NavDropdown.Item href="/ds" icon={<LayoutIcon />} description="Build consistent UIs">
      Design System
    </NavDropdown.Item>
    <NavDropdown.Item href="/lib" icon={<ComponentIcon />} description="Reusable components">
      Component Library
    </NavDropdown.Item>
  </NavDropdown>
</HeaderNavigation>

The dropdown spans the full screen width (1440px) with a left panel containing a description and CTA, and a right panel with 3 columns of sub-menu items. Ideal for menus with many categories.

A’raf DS

HomeProducts ▾Solutions ▾About

We are committed to giving all of our best efforts.

Design System

Build consistent UIs with our design tokens.

Component Library

Reusable, accessible components.

Data Analytics

Capturing and creating data-driven insights.

Deployment

Deployment on Windows & Linux environments.

Training

Improve your team’s technical capabilities.

<HeaderNavigation type="full-width">
  <NavDropdown
    label="Products"
    featured={{
      title: "We are committed to giving all of our best efforts.",
      ctaLabel: "Learn more",
      ctaHref: "/about",
    }}
  >
    <NavDropdown.Item href="/ds" description="Build consistent UIs">Design System</NavDropdown.Item>
    <NavDropdown.Item href="/analytics" description="Data-driven insights">Data Analytics</NavDropdown.Item>
    <NavDropdown.Item href="/training" description="Improve team capabilities">Training</NavDropdown.Item>
  </NavDropdown>
</HeaderNavigation>

Identical to Full Width, but each sub-menu item is accompanied by an icon on the left.

<HeaderNavigation type="full-width-with-icon">
  <NavDropdown label="Products" featured={{ title: "...", ctaLabel: "Learn more", ctaHref: "/about" }}>
    <NavDropdown.Item href="/ds" icon={<LayoutIcon />} description="Build consistent UIs">
      Design System
    </NavDropdown.Item>
  </NavDropdown>
</HeaderNavigation>

A more compact dropdown with no per-item descriptions, showing only link labels in a single column. Suitable for simple navigation menus.

<HeaderNavigation type="simple">
  <NavDropdown label="Products">
    <NavDropdown.Item href="/ds">Design System</NavDropdown.Item>
    <NavDropdown.Item href="/lib">Component Library</NavDropdown.Item>
    <NavDropdown.Item href="/figma">Figma Kit</NavDropdown.Item>
  </NavDropdown>
</HeaderNavigation>

Identical to Simple, but each item includes a small icon to the left of the text.

<HeaderNavigation type="simple-with-icon">
  <NavDropdown label="Products">
    <NavDropdown.Item href="/ds" icon={<LayoutIcon />}>Design System</NavDropdown.Item>
    <NavDropdown.Item href="/lib" icon={<ComponentIcon />}>Component Library</NavDropdown.Item>
  </NavDropdown>
</HeaderNavigation>

Breakpoints

Header Navigation supports two breakpoints: Desktop (1440px) and Mobile Responsive (360px).

Desktop
Mobile Responsive

Header width 1440px with content centered in a 1200px container. Logo, nav items, and CTA button are displayed horizontally.

A’raf DS

HomeProducts ▾Solutions ▾About

Property	Value
Header width	1440px
Container width	1200px
Height	80px
Nav item spacing	24px
Nav item font size	16px (Inter Medium)

On mobile screens (≤ 768px), nav items are hidden and replaced by a hamburger menu button on the right. The header height becomes 72px.

A’raf DS

Property	Value
Header width	100% (fluid)
Horizontal padding	16px (left) / 12px (right)
Height	72px
Nav items	Hidden
Menu button	Hamburger icon (24px)

For mobile views specifically, 4 size configurations are available.

small-centered (56px)

Page Title

small (56px)

Page Title

medium (108px)

Page Title

Supporting description text for the page.

large (152px)

Page Title

Supporting description text for the page.

Configuration	Height	Description
`small-centered`	56px	Centered title, back button on left, action on right
`small`	56px	Logo/back on left, title on left, action on right
`medium`	108px	Logo + title + supporting text
`large`	152px	Logo + title + supporting text + action buttons

import { HeaderNavigationMobile } from "@araf-ds/core";

<HeaderNavigationMobile
  configuration="large"
  title="Products"
  description="Browse our complete product catalog."
  trailingIcon1={<SearchIcon />}
  trailingIcon2={<NotificationIcon />}
/>

A slot on the right side of the header for displaying authentication buttons. Two states are available: Logged Out (Sign In + CTA) and Logged In (avatar or user menu).

Logged Out (default)

Logged In

Ahmad Badr▾

// Logged out state
<NavigationActions loggedIn={false}>
  <Button variant="secondary-gray">Sign In</Button>
  <Button variant="primary">Get Started</Button>
</NavigationActions>

// Logged in state
<NavigationActions loggedIn={true}>
  <UserMenu user={{ name: "Ahmad Badr", avatar: "/avatar.jpg" }} />
</NavigationActions>

A compact dropdown card (480px) displaying a vertical list of items with a title and description.

Token	Value
Background	`#FFFFFF`
Border	`1px solid #F4F4F5`
Border radius	`8px`
Padding	`24px`
Shadow	`xl` (0px 20px 24px -4px)
Width	480px

A full-width dropdown (1440px) with a featured panel on the left and 3 columns on the right.

Token	Value
Background	`#FFFFFF`
Padding	`64px 120px`
Shadow	`lg` (0px 12px 16px -4px)
Featured text color	`#011829` (Black)
Featured CTA bg	`#F0F9FF`
Featured CTA text	`#045CA0`
Item title color	`#52525B`
Item desc color	`#71717A`

API Reference

`HeaderNavigation`

default:"\"default\""

The navigation layout type, which determines the dropdown menu style.

"desktop" | "mobile-responsive"

default:"\"desktop\""

The rendering breakpoint. In mobile-responsive mode, nav items are replaced by a hamburger menu.

ReactNode

The logo content on the left side of the header (logomark + wordmark).

boolean

default:"false"

Whether the header stays fixed at the top during scroll (position: sticky).

string

Additional class for custom styling.

`NavItem`

string

required

The navigation destination URL.

boolean

default:"false"

Marks the item as the currently active page.

ReactNode

required

The nav item text label.

`NavDropdown`

string

required

The dropdown trigger text.

{ title: string; ctaLabel: string; ctaHref: string }

Featured panel content (only for full-width and full-width-with-icon types).

`NavDropdown.Item`

string

required

The dropdown item’s destination URL.

string

A short description text below the label. Not displayed for the simple type.

ReactNode

Icon on the left side of the item. Required for *-with-icon types.

`HeaderNavigationMobile`

"small-centered" | "small" | "medium" | "large"

required

The size and layout of the mobile header.

string

The page title displayed at the center or left of the header.

string

Supporting description below the title (only for medium and large).

ReactNode

The first icon on the right side of the header.

ReactNode

The second icon on the right side of the header.

ReactNode

The third icon on the right side of the header.

Accessibility

Header Navigation follows the WAI-ARIA patterns for navigation landmark and disclosure widget.

Use a <nav> element with aria-label="Main navigation" as the wrapper
Dropdown buttons must use aria-expanded (true/false) and aria-haspopup="true"
The dropdown panel uses role="menu" with items typed as role="menuitem"
Press Escape to close an open dropdown
Keyboard navigation: Tab between items, Enter/Space to open a dropdown, Arrow keys for items within the dropdown
The mobile hamburger button uses aria-label="Open menu" / aria-label="Close menu"
The logo link has aria-label="Go to homepage"

Do’s & Don’ts

Do

Use a single Header Navigation per page
Limit the number of nav items at the top level (maximum 5–6 items)
Use the full-width type for menus with many sub-categories
Ensure the active item is marked with the primary color (#0479CE)
Include NavigationActions with a clear CTA

Don't

Don’t nest dropdowns more than 2 levels deep
Don’t put more than 3 columns in a Standard sub menu
Don’t use overly long nav item text (max ~2 words)
Don’t remove the logo from the header
Don’t use the Desktop breakpoint on screen widths < 768px

Actions

Forms

Data Display

Feedback

Navigation

Layout

Charts

Icons

Overview

Installation

Usage

Type Variants

Breakpoints

Mobile Header Navigation

Navigation Actions

Sub Menu

Standard Sub Menu

Full Width Sub Menu

API Reference

`HeaderNavigation`

`NavItem`

`NavDropdown`

`NavDropdown.Item`

`HeaderNavigationMobile`

Accessibility

Do’s & Don’ts

Do

Don't

​Overview

​Installation

​Usage

​Type Variants

​Breakpoints

​Mobile Header Navigation

​Navigation Actions

​Sub Menu

​Standard Sub Menu

​Full Width Sub Menu

​API Reference

​HeaderNavigation

​NavItem

​NavDropdown

​NavDropdown.Item

​HeaderNavigationMobile

​Accessibility

​Do’s & Don’ts

Do

Don't

Overview

Installation

Usage

Type Variants

Breakpoints

Mobile Header Navigation

Navigation Actions

Sub Menu

Standard Sub Menu

Full Width Sub Menu

API Reference

`HeaderNavigation`

`NavItem`

`NavDropdown`

`NavDropdown.Item`

`HeaderNavigationMobile`

Accessibility

Do’s & Don’ts