Skip to main content

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

​
Breakpoints

Header Navigation mendukung dua breakpoint: Desktop (1440px) dan Mobile Responsive (360px).
Lebar header 1440px dengan konten terpusat di container 1200px. Logo, nav item, dan CTA button ditampilkan secara horizontal.
A’raf DS
HomeProducts ▾Solutions ▾About
PropertiNilai
Lebar header1440px
Lebar container1200px
Tinggi80px
Spacing nav item24px
Font size nav item16px (Inter Medium)

​
Mobile Header Navigation

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.

KonfigurasiTinggiDeskripsi
small-centered56pxJudul terpusat, back button kiri, action kanan
small56pxLogo/back kiri, judul kiri, action kanan
medium108pxLogo + judul + supporting text
large152pxLogo + 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

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

​
Standard Sub Menu

Dropdown card dengan ukuran kompak (480px), menampilkan daftar item vertikal dengan judul + deskripsi.
TokenNilai
Background#FFFFFF
Border1px solid #F4F4F5
Border radius8px
Padding24px
Shadowxl (0px 20px 24px -4px)
Lebar480px

​
Full Width Sub Menu

Dropdown yang membentang penuh (1440px) dengan panel featured di kiri dan 3 kolom di kanan.
TokenNilai
Background#FFFFFF
Padding64px 120px
Shadowlg (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" | "standard" | "standard-with-icon" | "full-width" | "full-width-with-icon" | "simple" | "simple-with-icon"
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.
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.
​
href
string
required
URL tujuan navigasi.
​
active
boolean
default:"false"
Menandai item sebagai halaman aktif saat ini.
​
children
ReactNode
required
Label teks nav item.
​
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).
​
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