Skip to main content Skip to docs navigation
View on GitHub

List group

Create organized, flexible content containers with Chassis's token-based list group component that adapts seamlessly to various content types and interaction patterns.

On this page

Introduction

List groups in Chassis CSS provide structured containers for related content with consistent styling and behavior. Beyond simple lists, they support interactive elements, custom content, and integration with other components—all while maintaining design token consistency with your broader interface.

Basic implementation

The foundation of the list group component is an unordered list with the .list-group container class and .list-item for individual entries. This structure establishes consistent spacing, borders, and typography through Chassis's design token system.

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<ul class="list-group">
  <li class="list-item">An item</li>
  <li class="list-item">A second item</li>
  <li class="list-item">A third item</li>
  <li class="list-item">A fourth item</li>
  <li class="list-item">And a fifth one</li>
</ul>

Active state

Apply the .active class to indicate the current selection or focused item within a list group. For better accessibility, include the aria-current="true" attribute to communicate the active state to assistive technologies.

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<ul class="list-group">
  <li class="list-item active" aria-current="true">An active item</li>
  <li class="list-item">A second item</li>
  <li class="list-item">A third item</li>
  <li class="list-item">A fourth item</li>
  <li class="list-item">And a fifth one</li>
</ul>

Disabled state

Apply the .disabled class to create visually disabled list items. Include the aria-disabled="true" attribute to properly communicate this state to assistive technologies.

The .disabled class only changes the visual appearance. For interactive elements like links, additional JavaScript is needed to fully disable interaction behavior.

  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<ul class="list-group">
  <li class="list-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-item">A second item</li>
  <li class="list-item">A third item</li>
  <li class="list-item">A fourth item</li>
  <li class="list-item">And a fifth one</li>
</ul>

Interactive elements

Transform list items into interactive elements using <a> or <button> elements with the .list-action modifier class. This creates actionable list items with appropriate hover, disabled, and active states based on your design token system.

The .list-action class provides distinct visual feedback for interactive elements while maintaining the list group's cohesive visual language. Unlike the .button component, list actions preserve the list group's distinctive appearance while adding interactivity.

Chassis CSS separates these interactive states from standard list items to maintain a clear distinction between read-only content and interactive elements, ensuring users receive appropriate visual affordances.

The current link item A second link item A third link item A fourth link item A disabled link item
html 
<div class="list-group">
  <a href="#" class="list-item list-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-item list-action">A second link item</a>
  <a href="#" class="list-item list-action">A third link item</a>
  <a href="#" class="list-item list-action">A fourth link item</a>
  <a class="list-item list-action disabled" aria-disabled="true">A disabled link item</a>
</div>

Both anchors and buttons can be used to create interactive list items, but they serve different semantic purposes:

  • Use <a> elements when the action navigates to a new location or resource
  • Use <button> elements when the action triggers an in-page behavior or state change

When using <button> elements, you can use the native disabled attribute, which both visually styles the element and prevents interaction. For <a> elements, the .disabled class only provides visual styling, and requires JavaScript to fully prevent interaction.

html 
<div class="list-group">
  <button type="button" class="list-item list-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-item list-action">A second button item</button>
  <button type="button" class="list-item list-action">A third button item</button>
  <button type="button" class="list-item list-action">A fourth button item</button>
  <button type="button" class="list-item list-action" disabled>A disabled button item</button>
</div>

Layout variations

Different presentation contexts may require variations in how list groups appear. Chassis provides several layout modifier classes that change how list groups display while maintaining design token consistency.

Flush list

Apply .flush to remove outer borders and rounded corners, creating an edge-to-edge appearance. Ideal for lists inside other components like cards where a seamless visual connection is desired.

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<ul class="list-group flush">
  <li class="list-item">An item</li>
  <li class="list-item">A second item</li>
  <li class="list-item">A third item</li>
  <li class="list-item">A fourth item</li>
  <li class="list-item">And a fifth one</li>
</ul>

Plain layout

Apply .plain for a minimal list that removes outer borders, rounded corners, and horizontal padding. Creates a sleek appearance suitable for main content areas like search results or content feeds.

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<ul class="list-group plain">
  <li class="list-item">An item</li>
  <li class="list-item">A second item</li>
  <li class="list-item">A third item</li>
  <li class="list-item">A fourth item</li>
  <li class="list-item">And a fifth one</li>
</ul>

Both .flush and .plain remove outer borders and rounded corners. The key difference is that .plain also removes horizontal padding for a more compact appearance.

Numbered lists

Create sequentially numbered list items by applying the .numbered modifier class to your list group. For semantic correctness, pair this with an <ol> element, though the numbering is generated through CSS rather than browser defaults.

Chassis CSS implements numbered list groups using design token-driven CSS counters. The numbering applies counter-reset on the container, and then uses ::before pseudo-elements with counter-increment to generate and position numbers consistently across different design contexts.

This approach ensures numbers maintain proper positioning and styling regardless of content complexity, providing better flexibility than browser defaults while remaining fully accessible.

  1. A list item
  2. A list item
  3. A list item
html 
<ol class="list-group numbered">
  <li class="list-item">A list item</li>
  <li class="list-item">A list item</li>
  <li class="list-item">A list item</li>
</ol>

These work great with custom content as well.

  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14
html 
<ol class="list-group numbered">
  <li class="list-item d-flex justify-content-between align-items-start">
    <div class="ms-xsmall me-auto">
      <div class="font-strong">Subheading</div>
      Content for list item
    </div>
    <span class="badge primary">14</span>
  </li>
  <li class="list-item d-flex justify-content-between align-items-start">
    <div class="ms-xsmall me-auto">
      <div class="font-strong">Subheading</div>
      Content for list item
    </div>
    <span class="badge primary">14</span>
  </li>
  <li class="list-item d-flex justify-content-between align-items-start">
    <div class="ms-xsmall me-auto">
      <div class="font-strong">Subheading</div>
      Content for list item
    </div>
    <span class="badge primary">14</span>
  </li>
</ol>

Horizontal layout

Create horizontally arranged list groups with the .horizontal modifier class. This transforms the default vertical stack into a row-based layout that maintains the list group's visual language and token-based styling.

For responsive designs, Chassis provides breakpoint-specific variants (.{breakpoint}:horizontal) that activate the horizontal layout only at or above the specified breakpoint size. This enables adaptive layouts that respond to available screen space while maintaining consistent styling.

Horizontal list groups cannot currently be combined with flush list groups due to their conflicting border handling strategies.

  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
html 
<ul class="list-group horizontal mb-medium">
  <li class="list-item">An item</li>
  <li class="list-item">A second item</li>
  <li class="list-item">A third item</li>
</ul>
<ul class="list-group small:horizontal mb-medium">
  <li class="list-item">An item</li>
  <li class="list-item">A second item</li>
  <li class="list-item">A third item</li>
</ul>
<ul class="list-group medium:horizontal mb-medium">
  <li class="list-item">An item</li>
  <li class="list-item">A second item</li>
  <li class="list-item">A third item</li>
</ul>
<ul class="list-group large:horizontal mb-medium">
  <li class="list-item">An item</li>
  <li class="list-item">A second item</li>
  <li class="list-item">A third item</li>
</ul>
<ul class="list-group xlarge:horizontal mb-medium">
  <li class="list-item">An item</li>
  <li class="list-item">A second item</li>
  <li class="list-item">A third item</li>
</ul>
<ul class="list-group 2xlarge:horizontal mb-medium">
  <li class="list-item">An item</li>
  <li class="list-item">A second item</li>
  <li class="list-item">A third item</li>
</ul>

Apply .flex-fill or flex-grow-1 utility classes on list items for full-width horizontal lists:

  • Use .flex-fill to distribute space evenly, giving each item equal width regardless of content
  • Use .flex-grow-1 for proportional distribution, where items grow to fill available space based on their content
  • An item
  • Second item
  • And the longer third item
  • An item
  • Second item
  • And the longer third item
html 
<ul class="list-group horizontal mb-medium">
  <li class="list-item flex-fill">An item</li>
  <li class="list-item flex-fill">Second item</li>
  <li class="list-item flex-fill">And the longer third item</li>
</ul>
<ul class="list-group horizontal">
  <li class="list-item flex-grow-1">An item</li>
  <li class="list-item flex-grow-1">Second item</li>
  <li class="list-item flex-grow-1">And the longer third item</li>
</ul>

Contextual variations

Chassis's design token system includes contextual color variants that communicate meaning through consistent visual language. Apply these contextual classes to list items to indicate state, importance, or category through your design system's color semantics.

  • A simple default list item
  • A simple alternate list item
  • A simple primary list item
  • A simple secondary list item
  • A simple neutral list item
  • A simple danger list item
  • A simple success list item
  • A simple warning list item
  • A simple info list item
  • A simple black list item
  • A simple white list item
html 
<ul class="list-group">
  <li class="list-item context default">A simple default list item</li>
  <li class="list-item context alternate">A simple alternate list item</li>
  <li class="list-item context primary">A simple primary list item</li>
  <li class="list-item context secondary">A simple secondary list item</li>
  <li class="list-item context neutral">A simple neutral list item</li>
  <li class="list-item context danger">A simple danger list item</li>
  <li class="list-item context success">A simple success list item</li>
  <li class="list-item context warning">A simple warning list item</li>
  <li class="list-item context info">A simple info list item</li>
  <li class="list-item context black">A simple black list item</li>
  <li class="list-item context white">A simple white list item</li>
</ul>

Interactive items

Combine contextual color variations with the .list-action class to create interactive elements that maintain semantic color meaning while adding appropriate hover and focus states. The design token system ensures that interactive states (hover, focus, active) maintain sufficient contrast and visual differentiation while preserving the contextual meaning of each color variant.

Apply the .active class to indicate the currently selected item within a contextually styled interactive list group.

A simple default list action A simple alternate list action A simple primary list action A simple secondary list action A simple neutral list action A simple danger list action A simple success list action A simple warning list action A simple info list action A simple black list action A simple white list action
html 
<div class="list-group list-action">
  <a href="#" class="list-item context default">A simple default list action</a>
  <a href="#" class="list-item context alternate">A simple alternate list action</a>
  <a href="#" class="list-item context primary">A simple primary list action</a>
  <a href="#" class="list-item context secondary">A simple secondary list action</a>
  <a href="#" class="list-item context neutral">A simple neutral list action</a>
  <a href="#" class="list-item context danger">A simple danger list action</a>
  <a href="#" class="list-item context success">A simple success list action</a>
  <a href="#" class="list-item context warning">A simple warning list action</a>
  <a href="#" class="list-item context info">A simple info list action</a>
  <a href="#" class="list-item context black">A simple black list action</a>
  <a href="#" class="list-item context white">A simple white list action</a>
</div>

Accessibility tip: Color alone shouldn't convey meaning as it's not perceived by assistive technology users. Ensure clarity through text with adequate contrast, ARIA attributes where needed, and consider using .visually-hidden for screen reader content.

Context styles

Contextual styles are applied to list groups or items using .solid, .outline, or .smooth classes. These classes apply the appropriate background, border, and text colors based on your design system's color palette.

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<div class="row medium:row-cols-2 g-large">
  <div class="col">
    <ul class="list-group context primary">
      <li class="list-item">An item</li>
      <li class="list-item">A second item</li>
      <li class="list-item">A third item</li>
      <li class="list-item">A fourth item</li>
      <li class="list-item">And a fifth one</li>
    </ul>
  </div>
  <div class="col">
    <ul class="list-group context primary solid flush rounded">
      <li class="list-item">An item</li>
      <li class="list-item">A second item</li>
      <li class="list-item">A third item</li>
      <li class="list-item">A fourth item</li>
      <li class="list-item">And a fifth one</li>
    </ul>
  </div>
  <div class="col">
    <ul class="list-group context primary smooth flush rounded">
      <li class="list-item">An item</li>
      <li class="list-item">A second item</li>
      <li class="list-item">A third item</li>
      <li class="list-item">A fourth item</li>
      <li class="list-item">And a fifth one</li>
    </ul>
  </div>
  <div class="col">
    <ul class="list-group context primary outline">
      <li class="list-item">An item</li>
      <li class="list-item">A second item</li>
      <li class="list-item">A third item</li>
      <li class="list-item">A fourth item</li>
      <li class="list-item">And a fifth one</li>
    </ul>
  </div>
</div>

Component combinations

Chassis CSS is designed as a cohesive system where components maintain design consistency when combined. List groups work effectively with other components to create rich, informative interfaces while preserving your design token system's visual language.

Items with badges

Combine list items with badges to display counts, status indicators, or other supplementary information. The flex utilities help position and align badges consistently while maintaining the list group's design integrity.

  • A list item 14
  • A second list item 2
  • A third list item 1
html 
<ul class="list-group">
  <li class="list-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge primary">14</span>
  </li>
  <li class="list-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge primary">2</span>
  </li>
  <li class="list-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge primary">1</span>
  </li>
</ul>

Rich content

List groups can accommodate complex content structures while maintaining design consistency. By leveraging flexbox utilities, you can create sophisticated layouts within list items that include headings, paragraphs, metadata, and other HTML elements—all while preserving your design token system's spacing, typography, and color relationships.

List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
html 
<div class="list-group">
  <a href="#" class="list-item list-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-2xsmall">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-2xsmall">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-item list-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-2xsmall">List group item heading</h5>
      <small class="fg-subtle">3 days ago</small>
    </div>
    <p class="mb-2xsmall">Some placeholder content in a paragraph.</p>
    <small class="fg-subtle">And some muted small print.</small>
  </a>
  <a href="#" class="list-item list-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-2xsmall">List group item heading</h5>
      <small class="fg-subtle">3 days ago</small>
    </div>
    <p class="mb-2xsmall">Some placeholder content in a paragraph.</p>
    <small class="fg-subtle">And some muted small print.</small>
  </a>
</div>

Form controls

List groups seamlessly integrate with Chassis's form controls to create selectable lists that maintain your design system's visual consistency. By combining list items with checkboxes and radio inputs, you can create selection interfaces that preserve the familiar list structure while adding form functionality.

When incorporating form controls within list groups, maintain accessibility through proper labeling. If visual labels aren't included, provide an aria-label attribute to ensure the control's purpose is communicated to assistive technologies.

html 
<ul class="list-group">
  <li class="list-item">
    <input class="check-input me-xsmall" type="checkbox" value="" id="firstCheckbox">
    <label class="check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-item">
    <input class="check-input me-xsmall" type="checkbox" value="" id="secondCheckbox">
    <label class="check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-item">
    <input class="check-input me-xsmall" type="checkbox" value="" id="thirdCheckbox">
    <label class="check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

Stretched labels

Apply the .stretched-link utility to <label> elements to expand the clickable/tappable area to cover the entire list item. This improves usability on touch devices while maintaining the visual appearance of the standard form control.

html 
<ul class="list-group">
  <li class="list-item">
    <input class="check-input me-xsmall" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-item">
    <input class="check-input me-xsmall" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-item">
    <input class="check-input me-xsmall" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

This component can be customized using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.

Custom properties

These CSS variables control the component's appearance and can be modified dynamically on the page. Components use cascading variables, allowing seamless variations in size, color, and style without redundant style declarations through component inheritance and the context class system.

scss/_list.scss 
--#{$prefix}padding-y: var(--#{$prefix}list-padding-y, #{$list-padding-y});
--#{$prefix}padding-x: var(--#{$prefix}list-padding-x, #{$list-padding-x});
--#{$prefix}fg-color: var(--#{$prefix}list-fg-color, #{$list-fg-color});
--#{$prefix}bg-color: var(--#{$prefix}list-bg-color, #{$list-bg-color});
--#{$prefix}fg-active: var(--#{$prefix}list-fg-active, #{$list-active-fg-color});
--#{$prefix}bg-active: var(--#{$prefix}list-bg-active, #{$list-active-bg-color});
--#{$prefix}fg-disabled: var(--#{$prefix}list-fg-disabled, #{$list-disabled-fg-color});
--#{$prefix}bg-disabled: var(--#{$prefix}list-bg-disabled, #{$list-disabled-bg-color});
--#{$prefix}border-active: var(--#{$prefix}list-border-active, #{$list-active-border-color});
--#{$prefix}border-color: var(--#{$prefix}list-border-color, #{$list-border-color});
--#{$prefix}border-width: var(--#{$prefix}list-border-width, #{$list-border-width});
--#{$prefix}border-radius: var(--#{$prefix}list-border-radius, #{$list-border-radius});

Sass variables

These Sass variables are also exposed as CSS custom properties using the --cx- prefix. A Sass variable $variable-name becomes available as --cx-variable-name in CSS, allowing for styles to be modified dynamically on the page. See the context components page for more details.

scss/_variables.scss 
$list-padding-y:              var(--#{$prefix}space-xsmall);
$list-padding-x:              var(--#{$prefix}space-medium);

$list-fg-color:               var(--#{$prefix}fg-main);
$list-bg-color:               var(--#{$prefix}bg-main);

$list-border-color:           var(--#{$prefix}border-subtle);
$list-border-width:           var(--#{$prefix}border-width-medium);
$list-border-radius:          var(--#{$prefix}border-radius-medium);

$list-active-fg-color:        $component-active-fg-color;
$list-active-bg-color:        $component-active-bg-color;
$list-active-border-color:    transparent;

$list-disabled-fg-color:      var(--#{$prefix}fg-slight);
$list-disabled-bg-color:      inherit;

Sass mixins

Chassis CSS interactive placeholder selector used to create context variant and interactive list items. This mixin applies the appropriate styles for interactive elements like links and buttons within list groups, ensuring consistent design token usage across different states.

scss/placeholders/_interactive.scss 
%interactive {

  width: 100%; // For `<button>`s (anchors become 100% by default though)
  text-align: inherit; // For `<button>`s (anchors inherit)

  &:hover,
  &:focus {
    --#{$prefix}bg-color: var(--#{$prefix}bg-even);
    z-index: 1; // Place hover/focus items above their siblings for proper border styling
    color: var(--#{$prefix}fg-color);
    text-decoration: none;
  }

  &:active {
    --#{$prefix}bg-color: var(--#{$prefix}bg-evident);
  }

  &:disabled,
  &.disabled {
    --#{$prefix}fg-color: var(--#{$prefix}fg-slight);
    pointer-events: none;
  }

  &:visited {
    color: var(--#{$prefix}fg-color);
  }

}

JavaScript behaviors

Chassis CSS includes JavaScript functionality that extends list groups with dynamic behaviors while maintaining design token consistency across state changes. The most common interactive pattern is using list groups as navigation for tabbed content.

Tabbed navigation

The tab JavaScript plugin—available either as an individual module or through the compiled chassis.js file—transforms list groups into interactive tab navigation systems. This creates a cohesive interface where list group styling is applied to navigational elements that control content visibility.

Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-item list-action active" id="list-home-item" data-cx-toggle="list" href="#list-solid-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-item list-action" id="list-profile-item" data-cx-toggle="list" href="#list-solid-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-item list-action" id="list-messages-item" data-cx-toggle="list" href="#list-solid-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-item list-action" id="list-settings-item" data-cx-toggle="list" href="#list-solid-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-item">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-item">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-item">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-item">...</div>
    </div>
  </div>
</div>

Data attribute

Chassis supports a declarative implementation approach that requires no custom JavaScript. By adding the data-cx-toggle="list" attribute to list items, you enable the tabbed behavior through Chassis's data attribute API. This approach maintains separation of concerns while ensuring your list group tabs have consistent behavior and appearance.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-item list-action active" data-cx-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-item list-action" data-cx-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-item list-action" data-cx-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-item list-action" data-cx-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

See tab plugin documentation for more details on the tabbed navigation system, including options for programmatic control, event handling, and advanced usage patterns.