Skip to main content

Documentation Index

Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

A’raf DS
Default
A’raf DS
Primary Dark
A’raf DS
Gray Dark
Slim
The Sidebar Navigation component is the primary vertical navigation for application layouts. It is available in 2 styles (Default and Slim) with 3 color themes, plus an optional footer section containing the user account and utility links.

​
Installation

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

Two styles are available based on the sidebar layout format.

​
Default

Full-width sidebar with icons and text labels. Width: 312px.
A’raf DS
<SidebarNavigation style="default" theme="default" />

​
Slim

Compact icon-only sidebar without text labels. Width: 80px. Ideal for smaller screens or as the collapsed state of the Default sidebar. 
<SidebarNavigation style="slim" theme="default" />

​
Themes

Three color themes to match your project’s branding.
White-dominant with dark text. Best for light-themed applications.
A’raf DS
TokenValue
Background#FFFFFF
Text#27272A
Active item bg#F4F4F5
Border#E4E4E7
<SidebarNavigation theme="default" />
Each navigation item supports several optional elements.
Dashboard
10⌄
Projects
5⌄
ElementPropDefaultDescription
Status dotdottrueNotification/active status indicator
IconicontrueLeft-side icon
Number badgebadgefalseNotification or item count
Dropdown chevrondropdownfalseSub-menu indicator
Active statecurrentfalseHighlights the current page

​
States

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

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

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

// With dropdown (sub-menu)
<NavItem label="Projects" icon={LayersIcon} dropdown />
The footer prop renders a utility area at the bottom of the sidebar with Support, Settings, and user account information.
Iqbal Maulana
The footer contains:
  • Support — Link to the support page
  • Settings — Link to application settings
  • Account — Avatar, name, and email of the logged-in user
  • Logout button — End the current session
// With footer (default: true)
<SidebarNavigation footer />

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

​
API Reference

​
SidebarNavigation

​
style
string
default:"default"
Sidebar layout style. Values: default · slim
​
theme
string
default:"default"
Color theme. Values: default · primary-dark · gray-dark
​
footer
boolean
default:"true"
Renders the footer area with Support, Settings, and user account information.
​
className
string
Additional Tailwind classes for custom sizing or positioning.
​
label
string
Menu item text label. Not displayed in slim style.
​
icon
ComponentType
Icon component displayed to the left of the label.
​
current
boolean
default:"false"
Marks this item as the currently active page.
​
badge
number
Number displayed as a badge on the right side of the label.
​
dropdown
boolean
default:"false"
Shows a chevron indicating a collapsible sub-menu.
​
dot
boolean
default:"false"
Shows a green dot as a notification or status indicator.

​
Accessibility

  • Sidebar uses a semantic <nav> element
  • Active item carries the aria-current="page" attribute
  • Slim style must provide aria-label on every nav item for screen reader support
  • Full keyboard navigation: Tab, Enter, Space
  • Focus rings are visible on all interactive items

​
Do’s & Don’ts

Do

  • Use one consistent theme throughout the entire application
  • Always mark exactly one item as current matching the active page
  • Use Slim for tablet breakpoints or as a collapsed state
  • Provide tooltip labels on Slim sidebar items for accessibility

Don't

  • Don’t show more than 2 levels of navigation inside the sidebar
  • Don’t set more than one item as current simultaneously
  • Don’t hide the sidebar without providing an alternative navigation path
  • Don’t mix sidebar theme colors with custom colors outside the design system