Function

Navigation, breadcrumbs, tabs, pagination, and interactive UI components for creating functional user interfaces.

Tabs

Simple, clean tab interface with JavaScript integration for switching between content panels.

Interactive Tabs

  • The tabs are clean and simple unordered-list markup with basic CSS. They provide an intuitive way to organize content into logical sections.

  • The tabs are cross-browser compatible and don't require heavy JavaScript frameworks. The implementation is lightweight and performant.

  • The tabs work seamlessly on mobile devices. On smaller screens, they stack gracefully while maintaining full functionality.

 
<menu>
  <ul class="tabs">
    <li><a href="javascript:;" class="active" data-tab="simple">Simple</a></li>
    <li><a href="javascript:;" data-tab="lightweight">Lightweight</a></li>
    <li><a href="javascript:;" data-tab="mobile">Mobile Friendly</a></li>
  </ul>
  <ul class="tabs-content">
    <li id="simple" class="active">
      <p>The tabs are clean and simple...</p>
    </li>
    <li id="lightweight">
      <p>The tabs are cross-browser compatible...</p>
    </li>
    <li id="mobile">
      <p>The tabs work seamlessly on mobile devices...</p>
    </li>
  </ul>
</menu>

JavaScript Implementation

// Tab switching functionality
document.querySelectorAll('.tabs a').forEach(tab => {
  tab.addEventListener('click', function(e) {
    e.preventDefault();

    // Remove active class from all tabs and content
    document.querySelectorAll('.tabs a').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tabs-content li').forEach(content => {
      content.classList.remove('active');
    });

    // Add active class to clicked tab
    this.classList.add('active');

    // Show corresponding content
    const targetId = this.getAttribute('data-tab');
    document.getElementById(targetId).classList.add('active');
  });
});

Pagination

Navigation components for multi-page content, including standard pagination, filter navigation, and button groups.

Standard Pagination

<nav role="navigation">
  <ul class="pagination">
    <li><a href="#">‹ Prev</a></li>
    <li class="active"><span>1</span></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">Next ›</a></li>
  </ul>
</nav>

Filter Navigation

<nav role="navigation">
  <ul class="pagination">
    <li><strong>Filter by:</strong></li>
    <li class="active"><span>All</span></li>
    <li><a href="#">Active</a></li>
    <li><a href="#">Completed</a></li>
    <li><a href="#">Archived</a></li>
  </ul>
</nav>

Button Groups

<nav role="navigation">
  <ul class="pagination">
    <li><a href="#">← Previous</a></li>
    <li><a href="#">Next →</a></li>
  </ul>
</nav>

Steps & Progress

Step indicators and progress navigation for multi-step processes and workflows.

Step Indicator
<nav role="navigation">
  <ul class="pagination">
    <li class="active"><span>1. Account</span></li>
    <li><a href="#">2. Profile</a></li>
    <li><a href="#">3. Preferences</a></li>
    <li><a href="#">4. Complete</a></li>
  </ul>
</nav>

Best Practices

Accessibility

Mobile Considerations

Performance