Tabs — Bottom bar with icons

A framed preview sits above four icon-and-label radio choices in a bottom bar. Use for compact views where a media region should retain visual prominence.

ReactHTML

1440 × 480

Open in new tab

Component.tsx56 lines

export default function TabsBottomIconBar() {
  return (
    <div className="group w-72 overflow-hidden rounded-lg border border-neutral-200 bg-white text-neutral-900 sm:w-80">
      <section id="tabs-bottom-icon-bar-overview-panel" aria-labelledby="tabs-bottom-icon-bar-overview-label" className="hidden p-4 group-has-[#tabs-bottom-icon-bar-overview:checked]:block">
        <h2 className="text-base font-semibold">Panel heading</h2>
        <p className="mt-1 text-sm text-neutral-500">Supporting context</p>
        <div role="img" aria-label="Image placeholder: overview screenshot" className="mt-4 flex aspect-video items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-5-5L5 21" /></svg>
        </div>
      </section>
      <section id="tabs-bottom-icon-bar-activity-panel" aria-labelledby="tabs-bottom-icon-bar-activity-label" className="hidden p-4 group-has-[#tabs-bottom-icon-bar-activity:checked]:block">
        <h2 className="text-base font-semibold">Activity heading</h2>
        <p className="mt-1 text-sm text-neutral-500">Context for recent updates</p>
        <div role="img" aria-label="Image placeholder: activity screenshot" className="mt-4 flex aspect-video items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-5-5L5 21" /></svg>
        </div>
      </section>
      <section id="tabs-bottom-icon-bar-library-panel" aria-labelledby="tabs-bottom-icon-bar-library-label" className="hidden p-4 group-has-[#tabs-bottom-icon-bar-library:checked]:block">
        <h2 className="text-base font-semibold">Collection heading</h2>
        <p className="mt-1 text-sm text-neutral-500">Context for the collection</p>
        <div role="img" aria-label="Image placeholder: library screenshot" className="mt-4 flex aspect-video items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-5-5L5 21" /></svg>
        </div>
      </section>
      <section id="tabs-bottom-icon-bar-settings-panel" aria-labelledby="tabs-bottom-icon-bar-settings-label" className="hidden p-4 group-has-[#tabs-bottom-icon-bar-settings:checked]:block">
        <h2 className="text-base font-semibold">Setting heading</h2>
        <p className="mt-1 text-sm text-neutral-500">Context for preferences</p>
        <div role="img" aria-label="Image placeholder: settings screenshot" className="mt-4 flex aspect-video items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-5-5L5 21" /></svg>
        </div>
      </section>
      <div role="radiogroup" aria-label="Preview view" className="grid grid-cols-4 border-t border-neutral-200">
        <label id="tabs-bottom-icon-bar-overview-label" className="flex h-14 cursor-pointer flex-col items-center justify-center gap-1 border-t-2 border-transparent text-xs text-neutral-500 transition-colors hover:text-neutral-900 has-[:checked]:border-neutral-900 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-neutral-900">
          <input id="tabs-bottom-icon-bar-overview" type="radio" name="tabs-bottom-icon-bar" aria-controls="tabs-bottom-icon-bar-overview-panel" defaultChecked className="sr-only focus-visible:outline-hidden" />
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
          Overview
        </label>
        <label id="tabs-bottom-icon-bar-activity-label" className="flex h-14 cursor-pointer flex-col items-center justify-center gap-1 border-t-2 border-transparent text-xs text-neutral-500 transition-colors hover:text-neutral-900 has-[:checked]:border-neutral-900 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-neutral-900">
          <input id="tabs-bottom-icon-bar-activity" type="radio" name="tabs-bottom-icon-bar" aria-controls="tabs-bottom-icon-bar-activity-panel" className="sr-only focus-visible:outline-hidden" />
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="M3 12h4l3-7 4 14 3-7h4" /></svg>
          Activity
        </label>
        <label id="tabs-bottom-icon-bar-library-label" className="flex h-14 cursor-pointer flex-col items-center justify-center gap-1 border-t-2 border-transparent text-xs text-neutral-500 transition-colors hover:text-neutral-900 has-[:checked]:border-neutral-900 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-neutral-900">
          <input id="tabs-bottom-icon-bar-library" type="radio" name="tabs-bottom-icon-bar" aria-controls="tabs-bottom-icon-bar-library-panel" className="sr-only focus-visible:outline-hidden" />
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="M4 4h5v16H4zM10 4h5v16h-5zM16 5l4-1 3 15-4 1z" /></svg>
          Library
        </label>
        <label id="tabs-bottom-icon-bar-settings-label" className="flex h-14 cursor-pointer flex-col items-center justify-center gap-1 border-t-2 border-transparent text-xs text-neutral-500 transition-colors hover:text-neutral-900 has-[:checked]:border-neutral-900 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-neutral-900">
          <input id="tabs-bottom-icon-bar-settings" type="radio" name="tabs-bottom-icon-bar" aria-controls="tabs-bottom-icon-bar-settings-panel" className="sr-only focus-visible:outline-hidden" />
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="M4 7h16M4 17h16" /><circle cx="9" cy="7" r="3" /><circle cx="15" cy="17" r="3" /></svg>
          Settings
        </label>
      </div>
    </div>
  )
}

Pattern notes

When to use: Use for compact previews with a persistent bottom control bar. Choose tabs-vertical-rail for text-heavy content or tabs-segmented-pills for lists. Variations: swap the image glyph for a video glyph, change the four view labels and icons, or add a short numeric value to the context line.
Hierarchy: Read the panel heading and short context, then the large image placeholder, then the bottom choices. Headings use up to 4 words, meta up to 5 and labels one word. Radio controls connect to labelled sections through aria-controls; media placeholders name the screenshot slot.
Responsive: The frame is 288px below 640px and 320px from 640px. The media remains 16:9 and the four-column bottom bar never wraps. The initial frame is about 299px high on mobile and 317px on desktop.
Layout: A rounded-lg white frame with 1px neutral-200 border is 288px (w-72), growing to 320px (sm:w-80) at 640px. Each panel has 16px padding, a 16px heading, 4px to 14px meta and 16px to a 16:9 neutral-100 media placeholder. A 1px top divider separates a four-column bottom bar of 56px labels, each with a 20px icon, 4px gap, 12px label and 2px top indicator.
States: Overview is checked initially and only its section displays. The selected label has neutral-900 medium text and a 2px top indicator; other labels are neutral-500 and hover to neutral-900. Native arrow keys switch views. Radio focus outlines the label by 2px inset 2px so overflow-hidden cannot clip it. There are no disabled choices.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Panel heading                                        │
│ Supporting context                                   │
│ ┌──────────────────────────────────────────────────┐ │
│ │                      Image                       │ │
│ └──────────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────┤
│    Icon        Icon        Icon        Icon          │
│ [Overview]  [Activity]   [Library]  [Settings]       │
└──────────────────────────────────────────────────────┘

View all

Tabs — Centered period choices and a metric
Layout tags: centered,stacked,numbers,compact
Tabs — Counted links with More menu
Layout tags: row,layered,numbers,compact
Tabs — Counted views beneath a toolbar
Layout tags: stacked,row,numbers,compact

Tabs — Bottom bar with icons

Pattern notes

More in Tabs

Tabs — Centered period choices and a metric

Tabs — Counted links with More menu

Tabs — Counted views beneath a toolbar