साइडबार
Basic Sidebar
A static navigation column - brand, icon-and-label links, and one clearly marked current page.
#sidebar#navigation#static
6 फ्रेमवर्कशुरुआती
Loading…
A committed-dark navigation column that needs no light styles and no `dark:` toggle to look right.
<!-- A committed-dark shell: no light styles, so it does not depend on a dark: toggle. -->
<aside class="flex w-64 flex-col gap-4 bg-gray-950 p-4">
<a href="/" class="flex items-center gap-2 px-2 text-base font-bold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400">
<span class="grid h-7 w-7 place-items-center rounded-md bg-indigo-500 text-sm text-white" aria-hidden="true">A</span>
Adysre
</a>
<nav aria-label="Sidebar">
<ul class="flex flex-col gap-0.5">
<li>
<a href="/dashboard" aria-current="page" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 aria-[current=page]:bg-gray-800 aria-[current=page]:text-white">
<svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
Dashboard
</a>
</li>
<li>
<a href="/projects" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400">
<svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 7a2 2 0 0 1 2-2h3l2 2h9a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>
Projects
</a>
</li>
<li>
<a href="/team" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400">
<svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0"/><path d="M16 5.5a3 3 0 0 1 0 5"/><path d="M18 20a6 6 0 0 0-2-4.5"/></svg>
Team
</a>
</li>
</ul>
</nav>
</aside>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
itemsआवश्यक | SidebarItem[] | - | रेंडर की जाने वाली आइटम की सूची। |
pathnameआवश्यक | string | - | वर्तमान पथ। इससे मेल खाने वाला आइटम सक्रिय पृष्ठ के रूप में चिह्नित होता है। |
title | string | 'Adysre' | कार्ड की हेडिंग टेक्स्ट। |
ariaLabel | string | 'Sidebar' | बटन का एक्सेसिबल नाम। सिर्फ़ आइकन वाले बटन के लिए ज़रूरी है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Every colour is chosen for a dark surface, so it renders correctly with or without a `dark` class on the root. The active item is marked with `aria-current="page"` and highlighted off that attribute - one source of truth. Swap the indigo accent for any brand hue in the brand chip and the focus ring.