Product block

Grouped App Sidebar

Brand header, search trigger, labelled link groups and a user row, with each group announced as a list and the active link marked aria-current.

199 lineslucide-react

sidebar
navigation
app
groups
admin

What's included

components/sidebar-app-grouped.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add sidebar-app-grouped

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Your page content goes here

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/sidebar-app-grouped.tsx

'use client'

/**
 * <SidebarAppGrouped> — the application sidebar most products converge on:
 * a brand header, a search trigger, labelled groups of links and a user row.
 *
 *  - Each group is a real heading plus a list, and the list points back at its
 *    heading with `aria-labelledby`. A screen reader announces "Platform,
 *    list, 3 items" instead of reading eight links as one undifferentiated
 *    run.
 *  - The active link carries `aria-current="page"`. The tint is only a
 *    second cue: a colour-blind user and a screen reader both get the first.
 *  - Every id is rooted in `useId()`, so two sidebars on one page (a desktop
 *    one and a drawer copy, say) never collide on a label reference.
 *  - Logical properties throughout (`ps-`, `border-e`, `ms-auto`), so the
 *    sidebar flips to the right edge in an RTL document with no extra work.
 */

import * as React from 'react'
import {
  LayoutDashboard,
  FolderKanban,
  Rocket,
  Users,
  CreditCard,
  Plug,
  Search,
  ChevronsUpDown,
} from 'lucide-react'

export interface SidebarLink {
  id: string
  label: string
  icon: React.ReactNode
  href?: string
  badge?: string
}

export interface SidebarGroup {
  label: string
  links: SidebarLink[]
}

export interface SidebarAppGroupedProps {
  brand?: string
  groups?: SidebarGroup[]
  /** Uncontrolled starting point; clicking a link moves it. */
  defaultActiveId?: string
  user?: { name: string; email: string }
  onNavigate?: (id: string) => void
  children?: React.ReactNode
  className?: string
}

const icon = 'h-4 w-4 shrink-0'

const DEFAULT_GROUPS: SidebarGroup[] = [
  {
    label: 'Platform',
    links: [
      { id: 'overview', label: 'Overview', icon: <LayoutDashboard aria-hidden className={icon} /> },
      { id: 'projects', label: 'Projects', icon: <FolderKanban aria-hidden className={icon} />, badge: '8' },
      { id: 'deployments', label: 'Deployments', icon: <Rocket aria-hidden className={icon} /> },
    ],
  },
  {
    label: 'Workspace',
    links: [
      { id: 'members', label: 'Members', icon: <Users aria-hidden className={icon} /> },
      { id: 'billing', label: 'Billing', icon: <CreditCard aria-hidden className={icon} /> },
      { id: 'integrations', label: 'Integrations', icon: <Plug aria-hidden className={icon} /> },
    ],
  },
]

export function SidebarAppGrouped({
  brand = 'Acme Inc',
  groups = DEFAULT_GROUPS,
  defaultActiveId = 'projects',
  user = { name: 'Ada Lovelace', email: 'ada@acme.com' },
  onNavigate,
  children,
  className = '',
}: SidebarAppGroupedProps) {
  const uid = React.useId()
  const [activeId, setActiveId] = React.useState(defaultActiveId)

  const go = (id: string) => {
    setActiveId(id)
    onNavigate?.(id)
  }

  return (
    <div
      className={`flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ${className}`}
    >
      <aside
        aria-label="Application"
        className="flex w-[256px] shrink-0 flex-col border-e border-border/60 bg-card/40"
      >
        <div className="flex items-center gap-2 px-4 pt-4">
          <span
            aria-hidden
            className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-sm font-bold text-primary-foreground"
          >
            {brand.slice(0, 1)}
          </span>
          <span className="min-w-0 flex-1 truncate text-sm font-semibold tracking-tight">{brand}</span>
          <ChevronsUpDown aria-hidden className="h-4 w-4 text-muted-foreground" />
        </div>

        <div className="px-3 pt-4">
          <button
            type="button"
            className="flex w-full items-center gap-2 rounded-xl border border-border/60 bg-background px-3 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
          >
            <Search aria-hidden className="h-4 w-4" />
            <span className="flex-1 text-start">Search</span>
            <kbd className="rounded border border-border/60 px-1.5 text-[11px] font-medium">⌘K</kbd>
          </button>
        </div>

        <nav aria-label="Main" className="flex-1 space-y-5 overflow-y-auto px-3 py-4">
          {groups.map((group, gi) => {
            const headingId = `${uid}-group-${gi}`
            return (
              <div key={group.label}>
                <h2
                  id={headingId}
                  className="px-3 pb-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
                >
                  {group.label}
                </h2>
                <ul aria-labelledby={headingId} className="space-y-0.5">
                  {group.links.map((link) => {
                    const active = link.id === activeId
                    return (
                      <li key={link.id}>
                        <a
                          href={link.href ?? '#'}
                          aria-current={active ? 'page' : undefined}
                          onClick={(e) => {
                            if (!link.href) e.preventDefault()
                            go(link.id)
                          }}
                          className={`flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
                            active
                              ? 'bg-primary/10 text-primary'
                              : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                          }`}
                        >
                          {link.icon}
                          <span className="min-w-0 flex-1 truncate">{link.label}</span>
                          {link.badge ? (
                            <span className="rounded-full bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
                              {link.badge}
                            </span>
                          ) : null}
                        </a>
                      </li>
                    )
                  })}
                </ul>
              </div>
            )
          })}
        </nav>

        <div className="border-t border-border/60 p-3">
          <div className="flex items-center gap-3 rounded-xl px-2 py-2">
            <span
              aria-hidden
              className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-bold"
            >
              {user.name
                .split(' ')
                .map((w) => w[0])
                .slice(0, 2)
                .join('')}
            </span>
            <span className="min-w-0">
              <span className="block truncate text-sm font-medium">{user.name}</span>
              <span className="block truncate text-xs text-muted-foreground">{user.email}</span>
            </span>
          </div>
        </div>
      </aside>

      <main className="hidden min-w-0 flex-1 p-6 sm:block">
        {children ?? (
          <div className="flex h-full min-w-0 items-center justify-center break-words rounded-xl border border-dashed border-border/60 p-4 text-center text-sm text-muted-foreground">
            Your page content goes here
          </div>
        )}
      </main>
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/sidebar-app-grouped.tsx and import it where you need the section:

import { SidebarAppGrouped } from '@/components/sidebar-app-grouped'

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`brand`	`string`	`'Acme Inc'`
`groups`	`SidebarGroup[]`	`DEFAULT_GROUPS`
`defaultActiveId`Uncontrolled starting point; clicking a link moves it.	`string`	`'projects'`
`user`	`{ name: string; email: string }`	`{ name: 'Ada Lovelace', email: 'ada@acme.com' }`
`onNavigate`	`(id: string) => void`	—
`children`	`React.ReactNode`	—
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

sidebar-app-grouped.html

<!--
  Grouped App Sidebar — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<div class="flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ">
  <aside aria-label="Application" class="flex w-[256px] shrink-0 flex-col border-e border-border/60 bg-card/40">
    <div class="flex items-center gap-2 px-4 pt-4">
      <span aria-hidden="true" class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-sm font-bold text-primary-foreground">A</span>
      <span class="min-w-0 flex-1 truncate text-sm font-semibold tracking-tight">Acme Inc</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down h-4 w-4 text-muted-foreground" aria-hidden="true">
        <path d="m7 15 5 5 5-5"></path>
        <path d="m7 9 5-5 5 5"></path>
      </svg>
    </div>
    <div class="px-3 pt-4">
      <button type="button" class="flex w-full items-center gap-2 rounded-xl border border-border/60 bg-background px-3 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search h-4 w-4" aria-hidden="true">
          <path d="m21 21-4.34-4.34"></path>
          <circle cx="11" cy="11" r="8"></circle>
        </svg>
        <span class="flex-1 text-start">Search</span>
        <kbd class="rounded border border-border/60 px-1.5 text-[11px] font-medium">⌘K</kbd>
      </button>
    </div>
    <nav aria-label="Main" class="flex-1 space-y-5 overflow-y-auto px-3 py-4">
      <div>
        <h2 id="_R_0_-group-0" class="px-3 pb-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Platform</h2>
        <ul aria-labelledby="_R_0_-group-0" class="space-y-0.5">
          <li>
            <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard h-4 w-4 shrink-0" aria-hidden="true">
                <rect width="7" height="9" x="3" y="3" rx="1"></rect>
                <rect width="7" height="5" x="14" y="3" rx="1"></rect>
                <rect width="7" height="9" x="14" y="12" rx="1"></rect>
                <rect width="7" height="5" x="3" y="16" rx="1"></rect>
              </svg>
              <span class="min-w-0 flex-1 truncate">Overview</span>
            </a>
          </li>
          <li>
            <a href="#" aria-current="page" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary bg-primary/10 text-primary">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-kanban h-4 w-4 shrink-0" aria-hidden="true">
                <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path>
                <path d="M8 10v4"></path>
                <path d="M12 10v2"></path>
                <path d="M16 10v6"></path>
              </svg>
              <span class="min-w-0 flex-1 truncate">Projects</span>
              <span class="rounded-full bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">8</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket h-4 w-4 shrink-0" aria-hidden="true">
                <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
                <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
                <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
                <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
              </svg>
              <span class="min-w-0 flex-1 truncate">Deployments</span>
            </a>
          </li>
        </ul>
      </div>
      <div>
        <h2 id="_R_0_-group-1" class="px-3 pb-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Workspace</h2>
        <ul aria-labelledby="_R_0_-group-1" class="space-y-0.5">
          <li>
            <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4 shrink-0" aria-hidden="true">
                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
                <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                <circle cx="9" cy="7" r="4"></circle>
              </svg>
              <span class="min-w-0 flex-1 truncate">Members</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card h-4 w-4 shrink-0" aria-hidden="true">
                <rect width="20" height="14" x="2" y="5" rx="2"></rect>
                <line x1="2" x2="22" y1="10" y2="10"></line>
              </svg>
              <span class="min-w-0 flex-1 truncate">Billing</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug h-4 w-4 shrink-0" aria-hidden="true">
                <path d="M12 22v-5"></path>
                <path d="M9 8V2"></path>
                <path d="M15 8V2"></path>
                <path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"></path>
              </svg>
              <span class="min-w-0 flex-1 truncate">Integrations</span>
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="border-t border-border/60 p-3">
      <div class="flex items-center gap-3 rounded-xl px-2 py-2">
        <span aria-hidden="true" class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-bold">AL</span>
        <span class="min-w-0">
          <span class="block truncate text-sm font-medium">Ada Lovelace</span>
          <span class="block truncate text-xs text-muted-foreground">ada@acme.com</span>
        </span>
      </div>
    </div>
  </aside>
  <main class="hidden min-w-0 flex-1 p-6 sm:block">
    <div class="flex h-full min-w-0 items-center justify-center break-words rounded-xl border border-dashed border-border/60 p-4 text-center text-sm text-muted-foreground">Your page content goes here</div>
  </main>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

10 more blocks in Sidebars

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Sidebars

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Sidebars blocks

View category

Grouped App Sidebar

What's included

Works with

License

Preview

Source

Before you paste

Where it goes

Customize

Props

Not using React?

For AI

10 more blocks in Sidebars

Shipping one commercially

More Sidebars blocks

Collapsible Icon-Rail Sidebar

Rail Plus Secondary Panel

Nested Accordion Sidebar

Sidebar With Workspace Switcher

Floating Inset Sidebar

Resizable Sidebar With Splitter

Docs Sidebar With Filter

Chat History Sidebar

Mail Folders Sidebar

File Explorer Tree Sidebar