Panels

Panels are lightweight containers that present grouped actions or navigation in a tidy column. They pair well with dropdowns, sidebars, and card layouts when you need clear separation without the visual weight of full cards or modals.

Use panels to cluster related links, filters, or metadata; keep headings concise, align icons where available, and rely on consistent padding so typography breathes. In interactive contexts, mirror button and link states to keep affordances obvious.

Regular panels use a simple list inside a bordered surface. They’re ideal for secondary navigation, quick links, or compact menus within dashboards. Reserve the .active state for the current item, and use .seperator to break groups without introducing unrelated chrome.

<nav class="panel">
  <ul>
    <li><a href="...">...</a></li>
    <li class="active"><a href="...">...</a></li>
    <li><a href="...">...</a></li>
    <li class="seperator"></li>
    <li><a href="...">...</a></li>
  </ul>
</nav>

Subnav panels add collapsible groups beneath primary links, letting you tuck away dense hierarchies while keeping the main list scannable. Pair the section label with a chevron icon and a checkbox toggle so keyboard and screen-reader users can expand or collapse with the same control.

<nav class="panel">
  <div class="header">...</div>
  <ul>
    <li><a href="...">...</a></li>
    <li class="active"><a href="...">...</a></li>
    <li><a href="...">...</a></li>
    <li class="subnav">
      <input type="checkbox" id="..." />
      <label for="...">
        ...
        <svg class="icon">...</svg>
      </label>
      <ul>
        <li><a href="">...</a></li>
        <li><a href="">...</a></li>
        <li><a href="">...</a></li>
      </ul>      
    </li>
    <li><a href="...">...</a></li>
  </ul>
</nav>

Icon panels layer glyphs beside headers and items to add quick recognition—useful for status, categories, or product types. Keep icon sizes consistent, align them with text baselines, and avoid using icons alone for meaning; pair every glyph with a readable label.

Common pitfalls: don’t overload panels with too many nested levels, ensure focus states remain visible inside collapsed areas, and avoid reusing identical IDs for toggles on the same page.

<nav class="panel">
  <div class="header">
    <svg class="icon">...</svg>
    Title
  </div>
  <ul>
    <li>
      <a href="">
        <svg class="icon">...</svg>
        Link
      </a>
    </li>
    <li class="subnav">
      <input type="checkbox" id="subnav-id">
      <label for="subnav-id">
        <svg class="icon">...</svg>
        Section
        <svg class="icon chevron">...</svg>
      </label>
      <ul>
        <li><a href="">Child</a></li>
      </ul>
    </li>
  </ul>
</nav>

Colored panels borrow Catppuccin palette accents to signal emphasis—warnings, featured categories, or highlighted filters. Apply a hue that reinforces the content’s intent and keep text contrast sufficient for readability; headers and icons should follow the same color system for cohesion.

<nav class="panel rosewater">...</nav>
<nav class="panel flamingo">...</nav>
<nav class="panel pink">...</nav>
<nav class="panel mauve">...</nav>
<nav class="panel red">...</nav>
<nav class="panel maroon">...</nav>
<nav class="panel peach">...</nav>
<nav class="panel yellow">...</nav>
<nav class="panel green">...</nav>
<nav class="panel teal">...</nav>
<nav class="panel sky">...</nav>
<nav class="panel sapphire">...</nav>
<nav class="panel blue">...</nav>
<nav class="panel lavender">...</nav>
<nav class="panel gray">...</nav>

Arrow panels point back to their trigger or anchor element, making it clear which control opened the surface. Use the arrow variant for contextual menus, tooltips, or dropdown-style panels where spatial relationship matters.

<nav class="panel arrow"></nav>

Arrow locations

Arrow placement is controlled via direction classes: combine top or bottom with left, center, or right to align the pointer. Pick the side closest to the trigger and flip on small viewports when space is constrained.

Placement tips: keep arrows from overlapping rounded corners, and ensure the panel remains fully within the viewport. If the trigger moves or resizes, recompute placement so the arrow still targets the origin.

<nav class="panel arrow top left"></nav>
<nav class="panel arrow top center"></nav>
<nav class="panel arrow top right"></nav>
<nav class="panel arrow bottom left"></nav>
<nav class="panel arrow bottom center"></nav>
<nav class="panel arrow bottom right"></nav>

Filter panels bundle checkboxes or radios inside a bordered surface, keeping controls aligned and scannable. Add a header to describe the filter group, and use consistent spacing so long labels remain readable.

Choose wisely: use checkboxes for independent selections and radios for mutually exclusive choices. See Checkboxes & radios for detailed accessibility guidance.

<nav class="panel">
  <ul class="checkboxes">...</ul>
</nav>

<nav class="panel">
  <ul class="radios">...</ul>
</nav>

Filters subnav

Filter subnav panels nest expandable groups so dense filter sets stay manageable. Each sub-section acts like an accordion, letting users open only the categories they need while keeping the parent panel compact.

<nav class="panel">
  <div class="header">...</div>
  <ul>
    <li class="subnav">
      <input type="checkbox" id="..." />
      <label for="...">
        ...
        <svg class="icon">...</svg>
      </label>
      <ul class="checkboxes">...</ul>      
    </li>
  </ul>
</nav>

<nav class="panel">
  <div class="header">...</div>
  <ul>
    <li class="subnav">
      <input type="checkbox" id="..." />
      <label for="...">
        ...
        <svg class="icon">...</svg>
      </label>
      <ul class="radios">...</ul>      
    </li>
  </ul>
</nav>

Form panels wrap inputs with aligned padding, making them feel related to adjacent navigation or settings panels. Use this pattern for search boxes, quick settings, or inline editors that live alongside lists.

Form guidance: keep labels visible, pair icon buttons with text where space allows, and align inputs to the panel grid so focus rings aren’t clipped. For detailed patterns and validation cues, see Input fields.

<nav class="panel">
  <form>...</form>
</nav>