Header Navigation

Overview

Header Navigation adalah komponen navigasi horizontal yang ditempatkan di bagian atas halaman. Komponen ini mendukung logo, menu item dengan atau tanpa dropdown, serta action button di sisi kanan.

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

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 memiliki 7 tipe layout yang menentukan bagaimana menu item dan sub-menu ditampilkan.

Logo dan nav item berjajar di tengah, CTA button di kanan. Tidak ada 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>

Dropdown menu tampil dalam card kecil (bordered, rounded) yang muncul di bawah nav item yang diklik. Cocok untuk menu dengan sedikit pilihan.

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>

Identik dengan Standard, namun setiap item di dropdown dilengkapi ikon di sisi kiri untuk memudahkan identifikasi visual.

<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>

Dropdown membentang penuh lebar layar (1440px) dengan panel kiri berisi deskripsi dan CTA, serta panel kanan berisi 3 kolom sub-menu. Ideal untuk menu dengan banyak kategori.

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>

Identik dengan Full Width, namun setiap item sub-menu dilengkapi ikon di sisi kiri.

<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>

Dropdown lebih ringkas tanpa deskripsi per item, hanya menampilkan label link dalam satu kolom. Cocok untuk menu navigasi sederhana.

<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>

Identik dengan Simple, namun setiap item dilengkapi ikon kecil di sebelah kiri teks.

<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 mendukung dua breakpoint: Desktop (1440px) dan Mobile Responsive (360px).

Desktop
Mobile Responsive

Lebar header 1440px dengan konten terpusat di container 1200px. Logo, nav item, dan CTA button ditampilkan secara horizontal.

A’raf DS

HomeProducts ▾Solutions ▾About

Properti	Nilai
Lebar header	1440px
Lebar container	1200px
Tinggi	80px
Spacing nav item	24px
Font size nav item	16px (Inter Medium)

Pada layar mobile (≤ 768px), nav item disembunyikan dan digantikan oleh hamburger menu button di kanan. Tinggi header menjadi 72px.

A’raf DS

Properti	Nilai
Lebar header	100% (fluid)
Padding horizontal	16px (kiri) / 12px (kanan)
Tinggi	72px
Nav item	Disembunyikan
Menu button	Hamburger icon (24px)

Khusus tampilan mobile, tersedia 4 konfigurasi ukuran.

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.

Konfigurasi	Tinggi	Deskripsi
`small-centered`	56px	Judul terpusat, back button kiri, action kanan
`small`	56px	Logo/back kiri, judul kiri, action kanan
`medium`	108px	Logo + judul + supporting text
`large`	152px	Logo + judul + 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 />}
/>

Slot di sisi kanan header untuk menampilkan tombol autentikasi. Tersedia dua kondisi: Logged Out (Sign In + CTA) dan Logged In (avatar atau 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>

Dropdown card dengan ukuran kompak (480px), menampilkan daftar item vertikal dengan judul + deskripsi.

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

Dropdown yang membentang penuh (1440px) dengan panel featured di kiri dan 3 kolom di kanan.

Token	Nilai
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`

type

default:"\"default\""

Tipe layout navigasi yang menentukan gaya dropdown menu.

breakpoint

"desktop" | "mobile-responsive"

default:"\"desktop\""

Breakpoint rendering. Pada mobile-responsive, nav item digantikan hamburger menu.

logo

ReactNode

Konten logo di sisi kiri header (logomark + wordmark).

sticky

boolean

default:"false"

Apakah header tetap di posisi atas saat scroll (position: sticky).

className

string

Class tambahan untuk kustomisasi styling.

`NavItem`

href

string

required

URL tujuan navigasi.

active

boolean

default:"false"

Menandai item sebagai halaman aktif saat ini.

children

ReactNode

required

Label teks nav item.

`NavDropdown`

label

string

required

Teks trigger dropdown.

featured

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

Konten panel featured (hanya untuk tipe full-width dan full-width-with-icon).

`NavDropdown.Item`

href

string

required

URL tujuan item dropdown.

description

string

Teks deskripsi singkat di bawah label. Tidak tampil pada tipe simple.

icon

ReactNode

Ikon di sisi kiri item. Wajib untuk tipe *-with-icon.

`HeaderNavigationMobile`

configuration

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

required

Ukuran dan layout header mobile.

title

string

Judul halaman yang ditampilkan di tengah atau kiri header.

description

string

Deskripsi pendukung di bawah judul (hanya medium dan large).

trailingIcon1

ReactNode

Ikon pertama di sisi kanan header.

trailingIcon2

ReactNode

Ikon kedua di sisi kanan header.

trailingIcon3

ReactNode

Ikon ketiga di sisi kanan header.

Accessibility

Header Navigation mengikuti pola WAI-ARIA untuk navigation landmark dan disclosure widget.

Gunakan elemen <nav> dengan aria-label="Main navigation" sebagai wrapper
Tombol dropdown harus menggunakan aria-expanded (true/false) dan aria-haspopup="true"
Dropdown panel menggunakan role="menu" dengan item bertipe role="menuitem"
Tekan Escape untuk menutup dropdown yang terbuka
Navigasi keyboard: Tab antar item, Enter/Space untuk buka dropdown, Arrow untuk item di dalam dropdown
Hamburger button mobile menggunakan aria-label="Open menu" / aria-label="Close menu"
Logo link memiliki aria-label="Go to homepage"

Do’s & Don’ts

Do

Gunakan satu Header Navigation per halaman
Batasi jumlah nav item di level utama (maksimal 5–6 item)
Gunakan tipe full-width untuk menu dengan banyak sub-kategori
Pastikan item aktif ditandai dengan warna primary (#0479CE)
Sertakan NavigationActions dengan CTA yang jelas

Don't

Jangan nesting dropdown lebih dari 2 level
Jangan taruh lebih dari 3 kolom pada sub menu Standard
Jangan gunakan teks nav item yang terlalu panjang (maks ~2 kata)
Jangan hapus logo dari header
Jangan gunakan breakpoint Desktop pada lebar layar < 768px

Actions

Data Display

Navigation

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

Actions

Data Display

Navigation

​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