Navbar
Build responsive primary navigation with brand, links, actions and a compact mobile layout.
NavigationResponsive
Search Results
A search results page composed from search and filter controls, removable filter chips, result cards, pagination and a no-results state.
Filtered results
Keep the submitted query visible, label every filter, and place active filters next to the result count. Each chip action identifies the filter it removes, while pagination preserves the current query and filters.
Search the Showcase
Find components, utilities and complete interface examples.
12 results for “navigation”
ComponentsAccessibility
Menu
Present a compact list of actions with keyboard navigation, focus return and collision-aware positioning.
NavigationKeyboard
Responsive application shell
Combine a navbar, sidebar drawer, breadcrumbs and page actions into an adaptive application frame.
NavigationLayout
<section aria-labelledby="search-results-heading">
<header>
<h3 id="search-results-heading">Search the Showcase</h3>
<p id="search-results-description">Find components, utilities and complete interface examples.</p>
</header>
<form class="card shadow-sm border-primary bg-primary bg-opacity-10" role="search" method="get" action="/search" aria-label="Search and filter the Showcase">
<div class="card-body">
<div class="grid gap-3">
<div class="col-12 col-lg-6">
<label class="form-label" for="search-query">Search</label>
<input class="form-control" id="search-query" name="query" type="search" value="navigation" />
</div>
<div class="col-12 col-sm-6 col-lg-3">
<label class="form-label" for="search-section">Section</label>
<select class="form-select" id="search-section" name="section">
<option value="all">All sections</option>
<option value="components" selected>Components</option>
<option value="utilities">Utilities</option>
<option value="examples">Examples</option>
</select>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<label class="form-label" for="search-topic">Topic</label>
<select class="form-select" id="search-topic" name="topic">
<option value="all">All topics</option>
<option value="accessibility" selected>Accessibility</option>
<option value="layout">Layout</option>
<option value="interaction">Interaction</option>
</select>
</div>
</div>
<footer class="d-flex flex-column flex-sm-row justify-content-sm-end gap-2 mt-3">
<a class="btn btn-text btn-secondary" href="/search">Clear all</a>
<button class="btn btn-solid btn-primary" type="submit">Search</button>
</footer>
</div>
</form>
<div class="d-flex flex-column flex-sm-row align-items-sm-center gap-2">
<p id="result-count"><strong>12 results for “navigation”</strong></p>
<div class="d-flex flex-wrap gap-1 ms-sm-auto" aria-label="Active search filters">
<span class="chip chip-primary chip-solid">
<span class="chip-label">Components</span>
<button class="chip-action" type="button" aria-label="Remove Components filter">
<span aria-hidden="true">×</span>
</button>
</span>
<span class="chip chip-secondary chip-solid">
<span class="chip-label">Accessibility</span>
<button class="chip-action" type="button" aria-label="Remove Accessibility filter">
<span aria-hidden="true">×</span>
</button>
</span>
</div>
</div>
<div class="grid" aria-labelledby="result-count">
<article class="card shadow-sm border-primary col-12 col-md-6" aria-labelledby="navbar-result-title">
<div class="card-body d-flex flex-column gap-2 h-100">
<header class="d-flex flex-wrap align-items-center gap-2">
<span class="badge bg-primary">Component</span>
<span class="text-muted text-sm">Updated August 2026</span>
</header>
<h4 class="card-title" id="navbar-result-title"><a href="/components/navbar">Navbar</a></h4>
<p>Build responsive primary navigation with brand, links, actions and a compact mobile layout.</p>
<div class="d-flex flex-wrap gap-1 mt-auto" aria-label="Result topics">
<span class="chip chip-primary chip-outline"><span class="chip-label">Navigation</span></span>
<span class="chip chip-secondary chip-outline"><span class="chip-label">Responsive</span></span>
</div>
</div>
</article>
<article class="card shadow-sm col-12 col-md-6" aria-labelledby="menu-result-title">
<div class="card-body d-flex flex-column gap-2 h-100">
<header class="d-flex flex-wrap align-items-center gap-2">
<span class="badge bg-primary">Component</span>
<span class="text-muted text-sm">Updated September 2026</span>
</header>
<h4 class="card-title" id="menu-result-title"><a href="/components/menu">Menu</a></h4>
<p>Present a compact list of actions with keyboard navigation, focus return and collision-aware positioning.</p>
<div class="d-flex flex-wrap gap-1 mt-auto" aria-label="Result topics">
<span class="chip chip-primary chip-outline"><span class="chip-label">Navigation</span></span>
<span class="chip chip-success chip-outline"><span class="chip-label">Keyboard</span></span>
</div>
</div>
</article>
<article class="card shadow-sm col-12 col-md-6" aria-labelledby="shell-result-title">
<div class="card-body d-flex flex-column gap-2 h-100">
<header class="d-flex flex-wrap align-items-center gap-2">
<span class="badge bg-secondary">Example</span>
<span class="text-muted text-sm">Updated September 2026</span>
</header>
<h4 class="card-title" id="shell-result-title"><a href="/examples/responsive-application-shell">Responsive application shell</a></h4>
<p>Combine a navbar, sidebar drawer, breadcrumbs and page actions into an adaptive application frame.</p>
<div class="d-flex flex-wrap gap-1 mt-auto" aria-label="Result topics">
<span class="chip chip-primary chip-outline"><span class="chip-label">Navigation</span></span>
<span class="chip chip-warning chip-outline"><span class="chip-label">Layout</span></span>
</div>
</div>
</article>
</div>
<footer class="d-flex flex-column flex-md-row align-items-md-center gap-3">
<p>Showing 1–3 of 12 results</p>
<nav class="pagination ms-md-auto" aria-label="Search result pages">
<span class="pagination-item disabled">Previous</span>
<a class="pagination-item is-active" href="?query=navigation&section=components&topic=accessibility&page=1" aria-current="page">1</a>
<a class="pagination-item" href="?query=navigation&section=components&topic=accessibility&page=2" aria-label="Page 2">2</a>
<a class="pagination-item" href="?query=navigation&section=components&topic=accessibility&page=3" aria-label="Page 3">3</a>
<a class="pagination-item" href="?query=navigation&section=components&topic=accessibility&page=4" aria-label="Page 4">4</a>
<a class="pagination-item" href="?query=navigation&section=components&topic=accessibility&page=2">Next</a>
</nav>
</footer>
</section>No results
Keep filters and the submitted query visible when nothing matches. Explain the outcome without treating it as an error, then offer the shortest useful recovery actions.
Active filters:ExamplesLayout
No results for “deprecated grid mixin”
Try a broader term or remove one of the active filters.
<section aria-labelledby="no-results-title">
<form class="card shadow-sm" role="search" method="get" action="/search" aria-label="Refine search with no results">
<div class="card-body">
<label class="form-label" for="empty-query">Search</label>
<div class="input-group">
<input class="form-control" id="empty-query" name="query" type="search" value="deprecated grid mixin" />
<button class="btn btn-solid btn-primary" type="submit">Search again</button>
</div>
</div>
</form>
<div class="d-flex flex-wrap align-items-center gap-2" aria-label="Active search filters">
<span class="chip chip-primary chip-solid">
<span class="chip-label">Examples</span>
<button class="chip-action" type="button" aria-label="Remove Examples filter">
<span aria-hidden="true">×</span>
</button>
</span>
<span class="chip chip-warning chip-solid">
<span class="chip-label">Layout</span>
<button class="chip-action" type="button" aria-label="Remove Layout filter">
<span aria-hidden="true">×</span>
</button>
</span>
</div>
<section class="empty-state border rounded" aria-labelledby="no-results-title" aria-describedby="no-results-description">
<span class="empty-state-icon" aria-hidden="true"><!-- Decorative search icon --></span>
<h3 class="empty-state-title" id="no-results-title">No results for “deprecated grid mixin”</h3>
<p class="empty-state-description" id="no-results-description">Try a broader term or remove one of the active filters.</p>
<div class="empty-state-actions">
<a class="btn btn-solid btn-primary" href="/search">Clear search and filters</a>
<button class="btn btn-outline btn-secondary" type="button">Save search</button>
</div>
</section>
</section>