# Collapsible sidebars

Published: September 3, 2025

Version: ^2.3.0

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_3_0_collapsible_sidebar_hero.png" alt="A sidebar in a collapsed state" />

Flux's sidebar can now collapse on desktop to give your app more breathing room, while maintaining all the functionality users expect.

We've also rebuilt the entire sidebar component system from the ground up with semantic, purpose-built components that make building consistent sidebar layouts effortless.

Let's take a look.

## Desktop collapsible behavior

The biggest change is the new `collapsible` prop that replaces the old `stashable` behavior. Don't worry—`stashable` is still supported for backwards compatibility, but we recommend migrating to `collapsible` for its improved flexibility. Now you can control exactly when and how your sidebar collapses:

```blade
<flux:sidebar collapsible>
    <flux:sidebar.header>
        <flux:sidebar.brand logo="/logo.png" name="Acme Inc" />
        <flux:sidebar.collapse />
    </flux:sidebar.header>

    <flux:sidebar.nav>
        <flux:sidebar.item icon="home">Dashboard</flux:sidebar.item>
        <flux:sidebar.item icon="inbox" badge="3">Messages</flux:sidebar.item>
    </flux:sidebar.nav>
</flux:sidebar>
```

When collapsed on desktop, the sidebar shrinks to an icon-only view that preserves all your navigation while maximizing screen real estate:

<video autoplay loop muted playsinline class="rounded-2xl border dark:border-zinc-700" width="640" alt="Sidebar collapsing on desktop showing icon-only navigation with tooltips">
  <source src="/img/blog/2_3_0_collapsible_sidebar_desktop.mp4" type="video/mp4">
</video>

Users can hover over any navigation item to see its label as a tooltip, ensuring accessibility isn't compromised in the collapsed state.

## Flexible collapsible options

The `collapsible` prop gives you precise control over when the sidebar can collapse:

- `collapsible="mobile"` - Only collapsible on mobile
- `collapsible` - Collapsible on both mobile and desktop
- No `collapsible` prop - Never collapsible (always visible)

```blade
<!-- Only collapses on mobile -->
<flux:sidebar collapsible="mobile">
    ...
</flux:sidebar>

<!-- Collapses on both mobile and desktop -->
<flux:sidebar collapsible>
    ...
</flux:sidebar>
```

## Configurable breakpoints

Want to customize when "mobile" vs "desktop" behavior kicks in? The new `breakpoint` prop accepts pixel values:

```blade
<flux:sidebar collapsible breakpoint="768">
    ...
</flux:sidebar>
```

This accepts integers (`768`), pixel strings (`"768px"`), or even rem values (`"48rem"`).

## Persistent user preferences

The sidebar automatically remembers collapse preferences across sessions, with separate states for mobile and desktop viewports. Users can collapse it on desktop, switch to mobile, and return to find their desktop preference preserved.

Set `persist="false"` if you want to disable this behavior:

```blade
<flux:sidebar collapsible persist="false">
    ...
</flux:sidebar>
```

## All new component structure

We've rebuilt the sidebar with semantic components that make the structure clearer and more consistent:

```blade
<flux:sidebar collapsible>
    <flux:sidebar.header>
        <flux:sidebar.brand logo="/logo.png" name="Acme Inc" />
        <flux:sidebar.collapse />
    </flux:sidebar.header>

    <flux:sidebar.search placeholder="Search..." />

    <flux:sidebar.nav>
        <flux:sidebar.item icon="home" current>Dashboard</flux:sidebar.item>
        <flux:sidebar.item icon="users">Team</flux:sidebar.item>

        <flux:sidebar.group expandable heading="Projects">
            <flux:sidebar.item>Website Redesign</flux:sidebar.item>
            <flux:sidebar.item>Mobile App</flux:sidebar.item>
        </flux:sidebar.group>
    </flux:sidebar.nav>
</flux:sidebar>
```

Instead of generic components like `flux:navlist.item`, you now use purpose-built `flux:sidebar.item` components that understand their sidebar context and respond appropriately to collapsed states.

## Accessibility considerations

We've made sure the collapsed sidebar maintains full keyboard navigation and screen reader support:

- All navigation items remain in the tab order
- Tooltips provide context for collapsed navigation items
- The collapse button includes proper ARIA labels
- Focus management works seamlessly between expanded and collapsed states

The new collapsible sidebar gives your applications the flexibility to adapt to different screen sizes and user preferences while maintaining a polished, accessible experience.

[Check out the sidebar documentation →](https://fluxui.dev/layouts/sidebar)