Sidebar Navigation

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

yarn add @araf-ds/core

pnpm add @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.

Default
Primary Dark
Gray Dark

White-dominant with dark text. Best for light-themed applications.

A’raf DS

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

<SidebarNavigation theme="default" />

Brand-dominant (#1093E7) with white text. Best for applications with a strong blue accent.

A’raf DS

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

<SidebarNavigation theme="primary-dark" />

Gray-dominant (#3F3F46) with light text. Best for dark or neutral themed applications.

A’raf DS

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

<SidebarNavigation theme="gray-dark" />

Nav Item

Each navigation item supports several optional elements.

Dashboard

10⌄

Projects

5⌄

Element	Prop	Default	Description
Status dot	`dot`	`true`	Notification/active status indicator
Icon	`icon`	`true`	Left-side icon
Number badge	`badge`	`false`	Notification or item count
Dropdown chevron	`dropdown`	`false`	Sub-menu indicator
Active state	`current`	`false`	Highlights 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

[email protected]

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

string

default:"default"

Sidebar layout style. Values: default · slim

string

default:"default"

Color theme. Values: default · primary-dark · gray-dark

boolean

default:"true"

Renders the footer area with Support, Settings, and user account information.

string

Additional Tailwind classes for custom sizing or positioning.

NavItem

string

Menu item text label. Not displayed in slim style.

ComponentType

Icon component displayed to the left of the label.

boolean

default:"false"

Marks this item as the currently active page.

number

Number displayed as a badge on the right side of the label.

Shows a chevron indicating a collapsible sub-menu.

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

Actions

Forms

Data Display

Feedback

Navigation

Layout

Charts

Icons

Overview

Installation

Usage

Style

Default

Slim

Themes

Nav Item

States

Footer

API Reference

SidebarNavigation

NavItem

Accessibility

Do’s & Don’ts

Do

Don't

​Overview

​Installation

​Usage

​Style

​Default

​Slim

​Themes

​Nav Item

​States

​Footer

​API Reference

​SidebarNavigation

​NavItem

​Accessibility

​Do’s & Don’ts

Do

Don't

Overview

Installation

Usage

Style

Default

Slim

Themes

Nav Item

States

Footer

API Reference

SidebarNavigation

NavItem

Accessibility

Do’s & Don’ts