Sidebar Navigation

Navigasi vertikal utama aplikasi — tersedia dalam dua style (Default & Slim) dan tiga tema warna.

Overview

A’raf DS

Default

A’raf DS

Primary Dark

A’raf DS

Gray Dark

Slim

Komponen Sidebar Navigation adalah navigasi vertikal utama untuk layout aplikasi. Tersedia dalam 2 style (Default dan Slim) dengan 3 pilihan tema warna, serta opsional footer berisi akun pengguna dan menu utility.

---

Installation

npm

npm install @araf-ds/core

---

Usage

import { SidebarNavigation } from "@araf-ds/core"

export default function Layout({ children }) {
  return (
    <div style={{ display: "flex" }}>
      <SidebarNavigation />
      <main>{children}</main>
    </div>
  )
}

---

Style

Tersedia dua style berdasarkan bentuk sidebar.

Default

Sidebar full-width dengan ikon dan label teks. Lebar 312px.

A’raf DS

<SidebarNavigation style="default" theme="default" />

Slim

Sidebar kompak icon-only tanpa label teks. Lebar 80px. Cocok untuk layar dengan ruang terbatas atau sebagai state collapsed dari sidebar Default.

<SidebarNavigation style="slim" theme="default" />

---

Themes

Tiga pilihan tema warna yang menyesuaikan branding project.

Default

Dominan putih dengan teks hitam. Cocok untuk aplikasi dengan latar terang.

A’raf DS

Token	Nilai
Background	#FFFFFF
Text	#27272A
Active item bg	#F4F4F5
Border	#E4E4E7

<SidebarNavigation theme="default" />

Primary Dark

Dominan warna brand (#1093E7) dengan teks putih. Cocok untuk aplikasi dengan aksen biru kuat.

A’raf DS

Token	Nilai
Background	#1093E7 (Blue/600)
Text	#F0F9FF (Blue/100)
Active item bg	#0479CE (Blue/700)

<SidebarNavigation theme="primary-dark" />

Gray Dark

Dominan abu-abu (#3F3F46) dengan teks terang. Cocok untuk aplikasi bertema gelap atau netral.

A’raf DS

Token	Nilai
Background	#3F3F46 (Gray/07)
Text	#E4E4E7 (Gray/02)
Active item bg	#52525B (Gray/06)

<SidebarNavigation theme="gray-dark" />

---

Nav Item

Setiap item navigasi memiliki beberapa elemen opsional yang dapat dikonfigurasi.

Dashboard

10⌄

Projects

5⌄

Elemen	Prop	Default	Keterangan
Dot indikator	dot	true	Notifikasi/status aktif
Ikon	icon	true	Ikon kiri label
Badge angka	badge	false	Jumlah notifikasi atau item
Chevron dropdown	dropdown	false	Indikator sub-menu
State aktif	current	"False"	Highlight halaman saat ini

State

// Default (tidak aktif)
<NavItem label="Dashboard" icon={BarChartIcon} />

// Active / current page
<NavItem label="Dashboard" icon={BarChartIcon} current />

// Dengan badge
<NavItem label="Inbox" icon={InboxIcon} badge={12} />

// Dengan dropdown (sub-menu)
<NavItem label="Projects" icon={LayersIcon} dropdown />

---

Footer

Prop footer menampilkan area di bawah sidebar berisi menu utility dan informasi akun pengguna.

Iqbal Maulana

[e-mail]

Footer berisi:

• Support — Tautan ke halaman dukungan
• Settings — Tautan ke pengaturan aplikasi
• Account — Avatar, nama, dan email pengguna aktif
• Logout button — Tombol keluar sesi

// Dengan footer (default: true)
<SidebarNavigation footer />

// Tanpa footer
<SidebarNavigation footer={false} />

---

API Reference

SidebarNavigation

style · string · default: "default"

Bentuk sidebar. Nilai: default · slim

theme · string · default: "default"

Tema warna sidebar. Nilai: default · primary-dark · gray-dark

footer · boolean · default: "true"

Menampilkan area footer berisi Support, Settings, dan informasi akun pengguna.

className · string

Class Tailwind tambahan untuk kustomisasi ukuran atau posisi.

NavItem

label · string

Teks label menu item. Tidak ditampilkan pada style slim.

icon · ComponentType

Komponen ikon yang ditampilkan di sebelah kiri label.

current · boolean · default: "false"

Menandai item sebagai halaman aktif saat ini.

badge · number

Angka yang ditampilkan sebagai badge di sebelah kanan label.

dropdown · boolean · default: "false"

Menampilkan chevron yang mengindikasikan adanya sub-menu.

dot · boolean · default: "false"

Menampilkan dot hijau sebagai indikator notifikasi atau status.

---

Accessibility

• Sidebar menggunakan elemen <nav> semantik
• Item aktif memiliki atribut aria-current="page"
• Sidebar Slim wajib menyediakan aria-label pada setiap nav item
• Keyboard navigation didukung penuh (Tab, Enter, Space)
• Fokus ring ditampilkan pada semua item interaktif

---

Do’s & Don’ts

Do

• Gunakan satu theme secara konsisten di seluruh aplikasi
• Tandai selalu satu item sebagai current sesuai halaman aktif
• Gunakan Slim untuk breakpoint tablet atau sebagai state collapsed
• Sediakan tooltip label pada sidebar Slim untuk aksesibilitas

Don't

• Jangan tampilkan lebih dari 2 level navigasi dalam sidebar
• Jangan gunakan lebih dari satu item current sekaligus
• Jangan sembunyikan sidebar tanpa menyediakan alternatif navigasi
• Jangan campur theme warna sidebar dengan warna custom di luar sistem