> ## 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. # Sidebar Navigation > The primary vertical navigation for application layouts — available in two styles (Default & Slim) and three color themes. ## Overview
A'raf DS
{["Home","Dashboard","Projects","Tasks","Reporting"].map((label, i) => (
{label}
))}
Default
A'raf DS
{["Home","Dashboard","Projects","Tasks","Reporting"].map((label, i) => (
{label}
))}
Primary Dark
A'raf DS
{["Home","Dashboard","Projects","Tasks","Reporting"].map((label, i) => (
{label}
))}
Gray Dark
{[0,1,2,3,4].map(i => (
))}
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 ```bash npm theme={null} npm install @araf-ds/core ``` ```bash yarn theme={null} yarn add @araf-ds/core ``` ```bash pnpm theme={null} pnpm add @araf-ds/core ``` *** ## Usage ```tsx theme={null} import { SidebarNavigation } from "@araf-ds/core" export default function Layout({ children }) { return (
{children}
) } ``` *** ## 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
{[["Home",""],["Dashboard","active"],["Projects",""],["Tasks",""],["Reporting",""],["Users",""]].map(([label,state]) => (
{label}
))}
```tsx theme={null} ``` ### Slim Compact icon-only sidebar without text labels. Width: **80px**. Ideal for smaller screens or as the collapsed state of the Default sidebar.
{[false,true,false,false,false,false].map((active,i) => (
))}
```tsx theme={null} ``` *** ## Themes Three color themes to match your project's branding. White-dominant with dark text. Best for light-themed applications.
A'raf DS
{[["Home",""],["Dashboard","active"],["Projects",""],["Settings",""]].map(([label,state]) => (
{label}
))}
| Token | Value | | -------------- | --------- | | Background | `#FFFFFF` | | Text | `#27272A` | | Active item bg | `#F4F4F5` | | Border | `#E4E4E7` | ```tsx theme={null} ``` Brand-dominant (`#1093E7`) with white text. Best for applications with a strong blue accent.
A'raf DS
{[["Home",""],["Dashboard","active"],["Projects",""],["Settings",""]].map(([label,state]) => (
{label}
))}
| Token | Value | | -------------- | -------------------- | | Background | `#1093E7` (Blue/600) | | Text | `#F0F9FF` (Blue/100) | | Active item bg | `#0479CE` (Blue/700) | ```tsx theme={null} ``` Gray-dominant (`#3F3F46`) with light text. Best for dark or neutral themed applications.
A'raf DS
{[["Home",""],["Dashboard","active"],["Projects",""],["Settings",""]].map(([label,state]) => (
{label}
))}
| Token | Value | | -------------- | ------------------- | | Background | `#3F3F46` (Gray/07) | | Text | `#E4E4E7` (Gray/02) | | Active item bg | `#52525B` (Gray/06) | ```tsx theme={null} ``` *** ## 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","#fff","#27272a","1px solid #e4e4e7"], ["Hover","#f4f4f5","#27272a","transparent"], ["Current (active)","#0479CE","#fff","transparent"], ].map(([label,bg,color,border]) => (
Menu item
{label}
))}
```tsx theme={null} // Default (inactive) // Active / current page // With badge count // With dropdown (sub-menu) ``` *** ## Footer The `footer` prop renders a utility area at the bottom of the sidebar with Support, Settings, and user account information.
{["Support","Settings"].map(label => (
{label}
))}
Iqbal Maulana
[iqbalm@email.com](mailto:iqbalm@email.com)
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 ```tsx theme={null} // With footer (default: true) // Without footer ``` *** ## API Reference ### SidebarNavigation Sidebar layout style. Values: `default` · `slim` Color theme. Values: `default` · `primary-dark` · `gray-dark` Renders the footer area with Support, Settings, and user account information. Additional Tailwind classes for custom sizing or positioning. ### NavItem Menu item text label. Not displayed in `slim` style. Icon component displayed to the left of the label. Marks this item as the currently active page. Number displayed as a badge on the right side of the label. Shows a chevron indicating a collapsible sub-menu. Shows a green dot as a notification or status indicator. *** ## Accessibility * Sidebar uses a semantic `