MENU: Vertical navigation list with left-border active accent
VARIANTS: Default | Card-wrapped (.tw-menu-card) | With icons | With header | Disabled item

Use for settings sidebars, in-page section navigation, and any vertical list of mutually-exclusive destinations. Items can be <button> (for tab-style panel switching) or <a> (for real links). Active state uses a 4px left border, subtle blue background, primary-colour text, and medium font weight.

Default (no card)

Base: Plain .tw-menu with no background or border. Use when the menu sits inside another container that already provides chrome.

<nav class="tw-menu"><button class="tw-menu-item tw-active">...</button></nav>

Card-wrapped with header

.tw-menu-card adds card chrome (white background, rounded corners, subtle border + shadow). Combine with .tw-menu-header for an eyebrow label above the items.

<nav class="tw-menu tw-menu-card"><div class="tw-menu-header">Settings</div><a class="tw-menu-item tw-active">...</a></nav>

With leading icons

Add an <i class="tw-menu-item-icon"> element inside the item. The icon sits in a fixed-width slot (w-4) so labels stay aligned across items.

<button class="tw-menu-item"><i class="fa-regular fa-gear tw-menu-item-icon"></i> General</button>

Disabled item

Add .tw-disabled or aria-disabled="true" to make an item non-interactive. Pointer events are blocked and text is muted.

<a class="tw-menu-item tw-disabled" aria-disabled="true" tabindex="-1">Billing</a>

Tab-switching usage

The menu is presentation-only — it pairs cleanly with the existing tabs_controller for panel switching. Use role="tablist" on the nav, role="tab" + data-tabs-target="tab" on items, and data-action="click->tabs#select keydown->tabs#keydown".

Overview

Overview panel content.