फ़ीचर्ड
डॉकmacOS Magnify Dock
A floating icon dock whose items swell under the pointer, the neighbours lifting less than the one you are on.
#dock#magnify#hover
6 फ्रेमवर्कएडवांस्ड
Loading…
A vertical rail that toggles between icon-only and icon-plus-label from one button.
<!--
A vertical rail that toggles between icon-only and icon+label. Shown EXPANDED;
the React/TypeScript variants own the toggle. When collapsed, each label
becomes sr-only rather than being removed, so every item keeps its accessible
name at any width. aria-expanded on the toggle is the source of truth.
-->
<nav class="fixed left-4 top-1/2 -translate-y-1/2 rounded-2xl border border-black/10 bg-white/90 p-2 shadow-[0_12px_32px_-12px_rgba(0,0,0,0.4)] backdrop-blur-md dark:border-white/10 dark:bg-gray-900/90" aria-label="Workspace">
<button type="button" aria-label="Collapse menu" aria-expanded="true" class="mb-1 flex h-11 w-11 items-center justify-center rounded-xl text-gray-700 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
<svg class="h-6 w-6 rotate-180 transition-transform motion-reduce:transition-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" /></svg>
</button>
<ul class="flex flex-col gap-1">
<li>
<a href="/inbox" aria-current="page" class="flex h-11 items-center gap-3 overflow-hidden rounded-xl px-[0.625rem] text-gray-700 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 aria-[current=page]:bg-blue-50 aria-[current=page]:text-blue-700 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400 dark:aria-[current=page]:bg-blue-950 dark:aria-[current=page]:text-blue-300">
<svg class="h-6 w-6 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 13h4l1.5 3h5L16 13h4M5.5 5h13l2.5 8v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5Z" /></svg>
<span class="whitespace-nowrap text-sm font-medium">Inbox</span>
</a>
</li>
<li>
<a href="/projects" class="flex h-11 items-center gap-3 overflow-hidden rounded-xl px-[0.625rem] text-gray-700 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
<svg class="h-6 w-6 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 7a2 2 0 0 1 2-2h3l2 2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z" /></svg>
<span class="whitespace-nowrap text-sm font-medium">Projects</span>
</a>
</li>
<li>
<a href="/insights" class="flex h-11 items-center gap-3 overflow-hidden rounded-xl px-[0.625rem] text-gray-700 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
<svg class="h-6 w-6 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2" /></svg>
<span class="whitespace-nowrap text-sm font-medium">Insights</span>
</a>
</li>
<li>
<a href="/settings" class="flex h-11 items-center gap-3 overflow-hidden rounded-xl px-[0.625rem] text-gray-700 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
<svg class="h-6 w-6 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM12 3v2M12 19v2M4.2 7.5l1.7 1M18.1 15.5l1.7 1M4.2 16.5l1.7-1M18.1 8.5l1.7-1" /></svg>
<span class="whitespace-nowrap text-sm font-medium">Settings</span>
</a>
</li>
</ul>
</nav>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
items | readonly SideItem[] | DEFAULT_ITEMS | रेंडर की जाने वाली आइटम की सूची। |
defaultExpanded | boolean | true | Active |
onSelect | (id: string) => void | - | यूज़र द्वारा चुने गए मेन्यू आइटम के साथ चलता है। |
ariaLabel | string | 'Workspace' | बटन का एक्सेसिबल नाम। सिर्फ़ आइकन वाले बटन के लिए ज़रूरी है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The toggle owns `aria-expanded`, and both the label visibility and the chevron rotation read off it. When collapsed the labels become `sr-only` rather than being removed, so every item keeps its accessible name at any width. The chevron transition is dropped under reduced motion.