Pattern
Nav Hybrid
Top navigation bar with brand, primary links, search, account menu. The pattern most apps put at the top of every page.
About
Overview
Nav is the global header. It tells the user where they are, what's available, and how to switch context. Make it sticky so it's reachable without scrolling, and keep it simple — primary destinations only, secondary stuff goes in account menus or settings.
Live
Demo
<nav class="ren-nav" aria-label="Primary">
<a href="/" class="ren-nav-brand">Acme</a>
<ul class="ren-nav-links">
<li><a href="/dashboard" aria-current="page">Dashboard</a></li>
<li><a href="/reports">Reports</a></li>
</ul>
<div class="ren-nav-actions">…</div>
</nav>Reference
API
| Class | Effect |
|---|---|
.ren-nav | The wrapper. Sticky-top, blurred backdrop, bottom border. |
.ren-nav-brand | The logo / app name link. Always returns to home. |
.ren-nav-links | The horizontal list of primary links. |
.ren-nav-actions | Trailing slot for buttons / account menu. |
Inclusive by default
Accessibility
- Wrap in
<nav aria-label="Primary">. - Mark the active link with
aria-current="page". - On mobile, collapse the links into a button-triggered Sheet rather than overflow off-screen.