webdevpuneet.com

Related Snippets

101 in Navigation category
55–60 of 60

Mega Menu Panel

Account Switcher

Sticky Product Bar

Floating Share Dock

Sidebar Mini

Breadcrumb Dropdown

Sidebar Mini — Free HTML CSS JS Collapsible Icon Sidebar Nav

Sidebar Mini · Navigation · Plain HTML, CSS & JS · Live preview

CategoryNavigation
TagsSVGAccessibility

Copy & paste

Source Code

<div class="sm-app">
  <aside class="sm-side" id="smSide">
    <div class="sm-top">
      <div class="sm-logo"><span class="sm-mark">◆</span><span class="sm-word">Polaris</span></div>
      <button type="button" class="sm-toggle" id="smToggle" aria-label="Collapse sidebar" aria-expanded="true">
        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>
      </button>
    </div>
    <nav class="sm-nav">
      <a class="sm-item is-active" href="#" data-tip="Dashboard"><svg viewBox="0 0 24 24"><path d="M3 13h8V3H3zM13 21h8V3h-8zM3 21h8v-6H3z"/></svg><span>Dashboard</span></a>
      <a class="sm-item" href="#" data-tip="Analytics"><svg viewBox="0 0 24 24"><path d="M3 3v18h18M7 14l3-3 4 4 5-6"/></svg><span>Analytics</span></a>
      <a class="sm-item" href="#" data-tip="Projects"><svg viewBox="0 0 24 24"><path d="M3 7h18v13H3zM3 7l2-3h6l2 3"/></svg><span>Projects</span></a>
      <a class="sm-item" href="#" data-tip="Messages"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><span>Messages</span></a>
      <a class="sm-item" href="#" data-tip="Settings"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7 7 0 0 0-1.7-1L14.5 2h-5l-.3 2.5a7 7 0 0 0-1.7 1l-2.4-1-2 3.5 2 1.5a7 7 0 0 0 0 2l-2 1.5 2 3.5 2.4-1a7 7 0 0 0 1.7 1l.3 2.5h5l.3-2.5a7 7 0 0 0 1.7-1l2.4 1 2-3.5-2-1.5a7 7 0 0 0 .1-1z"/></svg><span>Settings</span></a>
    </nav>
    <a class="sm-item sm-user" href="#" data-tip="Sign out"><span class="sm-av">AM</span><span>Aria Moss</span></a>
  </aside>
  <main class="sm-main"><p>Click the chevron to collapse the sidebar to icons. Hover a collapsed item for its label.</p></main>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Variable-driven width
One --w property animates the collapse.
Smooth transition
The whole rail expands as one panel.
Fading labels
Opacity dissolve, no reflow or pop.
Collapsed tooltips
data-tip chips appear only when narrow.
Rotating chevron
Toggle mirrors the open direction.
Active highlight
Click moves the selected state.
Pinned user row
Avatar and name anchored at the bottom.
ARIA toggle
aria-expanded and label update on change.

About this UI Snippet

Sidebar Mini — A Collapsible Icon-Rail Navigation

Screenshot of the Sidebar Mini snippet rendered live

The sidebar mini is the collapsible app navigation that shrinks from a full labelled column to a slim icon-only rail and back — the space-saving sidebar used in dashboards, editors, and admin panels. This snippet builds it with plain HTML, CSS transitions, and a tiny vanilla JavaScript toggle, including hover tooltips that appear only when collapsed.

One width variable drives the collapse

The sidebar's width is a CSS custom property (--w) with a transition, and collapsing simply swaps that variable from 236px to 74px via an is-collapsed class. Because everything inside is laid out with flexbox, the icons stay put on the left while the labels are clipped by the narrowing container — there's no per-element width juggling. Animating the width gives the smooth expand/contract that makes the rail feel like a single moving panel.

Labels fade as the rail narrows

The text labels are faded out with opacity (and clipped by overflow: hidden) when collapsed, rather than removed, so they don't reflow or pop — they dissolve as the icons slide to the centre of the rail. The chevron toggle button also rotates 180° to mirror the open/closed direction, a small affordance that signals what the click will do.

Tooltips, but only when collapsed

When the labels are hidden, the navigation would be cryptic, so each item exposes its name through a data-tip attribute that a CSS ::after tooltip reads — but only under the .is-collapsed selector. So in the expanded state the labels are visible and there are no tooltips; collapsed, hovering an icon reveals its label in a floating chip beside the rail. This is the standard pattern for icon-rail navigation and keeps the collapsed state usable.

Active state and structure

Clicking a nav item moves an is-active highlight to it, and the layout reserves a pinned user row at the bottom with a gradient initials avatar. The whole thing is built from real anchor elements with inline SVG icons, so it's lightweight, themeable with currentColor, and easy to wire to a router.

Accessibility

The toggle updates aria-expanded and its aria-label ("Collapse"/"Expand") as the state changes, so assistive tech announces the control correctly. Icons pair with text labels (visible when expanded, tooltip when collapsed), so navigation is never conveyed by icon shape alone.

Customizing it

Change the two widths, the transition speed, the accent, or the icon set; persist the collapsed state to localStorage; or collapse automatically below a breakpoint. Pair it with a sidebar nav, a dashboard layout, or a floating dock.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA full labelled sidebar renders beside content.
  2. 2
    Click the chevronThe sidebar collapses to an icon rail.
  3. 3
    Hover a collapsed iconA tooltip shows that item's label.
  4. 4
    Click a nav itemThe active highlight moves to it.
  5. 5
    Expand againThe chevron flips and labels fade back in.
  6. 6
    Tune the widthsChange the expanded and collapsed --w values.

Real-world uses

Common Use Cases

Dashboard navigation
Collapse a full labelled column into an icon rail beside a dashboard layout, animating a single --w property for the width.
Admin panel menus
Provide a collapsible sidebar nav that saves space, with label text fading out via opacity so nothing reflows or pops.
Editor workspaces
Maximise canvas space in a file manager UI or editor, with data-tip tooltips appearing only when the rail is narrow.
Settings area navigation
Link to sections of a settings panel, and compare with a floating dock for mobile-style navigation.
App shells
Frame an email inbox or any similar app shell with a sidebar that expands on demand and collapses to icons when space is tight.
Related: View Transitions API Page Navigation
See the View Transitions API Page Navigation for a related navigation pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The sidebar width is a CSS custom property --w with a transition, and the is-collapsed class swaps it from 236px to 74px. Because the interior is laid out with flexbox, the icons stay on the left while labels are clipped by the narrowing container, so the whole rail animates as one panel with no per-element width changes.

Each item carries its name in a data-tip attribute, and a CSS ::after tooltip reads it — but the rule is scoped under the .is-collapsed selector. Expanded, the labels are visible and there are no tooltips; collapsed, hovering an icon reveals its label in a floating chip. This keeps the icon-only state usable without redundant tooltips when text is already shown.

The labels are faded with opacity and clipped by overflow: hidden rather than removed from the DOM, so they dissolve as the rail narrows instead of reflowing or popping out. This makes the collapse read as a smooth visual change rather than a layout jump.

The toggle button updates aria-expanded and its aria-label between Collapse and Expand as the state changes, so screen readers announce the control correctly. Every nav item pairs an icon with a text label — visible when expanded, shown as a tooltip when collapsed — so navigation is never conveyed by icon shape alone.

Hold a collapsed boolean in state and bind the is-collapsed class to it, persisting to localStorage if you want it to stick. Render nav items from an array with their icon, label, and tip. Keep the active route in state or derive it from the router. All the width, fade, and tooltip behaviour is CSS, so it ports unchanged.

Yes. While the Sidebar Mini snippet gives you one pattern to copy, the free Responsive Navbar Builder at webdevpuneet.com/navbar-builder/ designs a whole navigation bar: logo, links and dropdown menus, a mobile hamburger menu (dropdown panel, slide-in drawer or full screen) and a scroll effect (sticky, shrink, hide on scroll or transparent). It has six presets, a live preview that runs the real code, and exports HTML + CSS + vanilla JS, React, Tailwind, Vue 3 or Angular — or you can click Fork & Edit to keep editing it in My Code.