Section Menu

The section menu provides persistent navigation within a content section, appearing as a left sidebar on desktop and a collapsible menu on mobile.

When to use

Use a section menu when:

• A section contains multiple related pages (e.g., documentation, guides)
• Users need to navigate between pages within a logical grouping
• The content hierarchy is 2-3 levels deep
• Quick access to sibling pages improves the user experience

Structure

The section menu consists of:

1. Section title - Identifies the current section
2. Navigation list - Links to pages within the section
3. Active indicator - Highlights the current page
4. Mobile toggle - Button to show/hide on smaller screens

Example

Design Specifications

Responsive Behaviour

Desktop (768px and above)

• Fixed width sidebar (260px)
• Always visible alongside main content
• Scrolls independently if content exceeds viewport height

Mobile (below 768px)

• Hidden by default
• Revealed via hamburger menu button in header
• Slides in as an overlay from the left
• Dark overlay covers main content when open
• Close button or tap outside to dismiss

Section Scoping

The section menu should only display pages within the current section:

• On /components/* pages, show only Components section links
• On /foundations/* pages, show only Foundations section links
• On /patterns/* pages, show only Patterns section links

This keeps navigation focused and prevents overwhelming users with unrelated links.

Accessibility

• Wrap in <aside> element for semantic meaning
• Navigation inside <nav> with descriptive aria-label
• Current page indicated with aria-current="page"
• Mobile menu toggle has aria-expanded and aria-controls
• Focus trapped within mobile menu when open
• Escape key closes mobile menu
• All links have visible focus states

HTML Structure

<aside class="section-sidebar">
  <nav class="section-nav" aria-label="Components navigation">
    <div class="section-title">
      <span>Components</span>
    </div>
    <ul class="section-nav-list">
      <li class="section-nav-item">
        <a href="/components" class="section-nav-link">
          Overview
        </a>
      </li>
      <li class="section-nav-item">
        <a href="/components/accordion" class="section-nav-link">
          Accordion
        </a>
      </li>
      <li class="section-nav-item">
        <a href="/components/buttons"
           class="section-nav-link active"
           aria-current="page">
          Buttons
        </a>
      </li>
      <!-- More navigation items -->
    </ul>
  </nav>
</aside>

<!-- Mobile overlay -->
<div class="sidebar-overlay" aria-hidden="true"></div>

CSS Classes

.section-sidebar {
  width: 260px;
  background-color: var(--bg-surface);
  border-right: 1px solid var(--border-default);
  height: 100%;
  overflow-y: auto;
}

.section-title {
  padding: 0 var(--space-5) var(--space-4);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-2);
}

.section-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-nav-item {
  margin: 0;
}

.section-nav-link {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color 100ms ease,
              color 100ms ease;
}

.section-nav-link:hover {
  color: var(--color-primary);
  background-color: var(--bg-muted);
}

.section-nav-link.active {
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  background-color: var(--color-primary-100);
  border-left-color: var(--color-primary);
}

/* Mobile styles */
@media (max-width: 767px) {
  .section-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: var(--z-modal);
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }

  .section-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease;
    z-index: calc(var(--z-modal) - 1);
  }

  .sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
  }
}