Navigation Pack

Ten responsive navbar, sidebar, breadcrumb, pagination and sub-navigation components with semantic landmarks.

10 distinct patterns6 frontend formats0 runtime dependencies

Free for personal and commercial projects. No attribution required.

Browse patterns View components

Pack options

Choose one portable format

The selected format applies to code panels and downloads.

Format

Simple Navbar

A compact product navbar with a clear current-page state and semantic landmark.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Simple Navbar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="dy-nav dy-nav__bar" aria-label="Primary"><a class="dy-nav__brand" href="/">Northstar</a><div class="dy-nav__links"><a href="#product" aria-current="page">Product</a><a href="#pricing">Pricing</a><a href="#about">About</a></div></nav>
</body>
</html>

Navbar with CTA

A balanced navigation bar that separates informational links from the primary action.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Navbar with CTA</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="dy-nav dy-nav__bar" aria-label="Primary"><a class="dy-nav__brand" href="/">Keystone</a><div class="dy-nav__links"><a href="#features">Features</a><a href="#docs">Docs</a></div><div class="dy-nav__actions"><a href="#signin">Sign in</a><a class="dy-nav__cta" href="#start">Start free</a></div></nav>
</body>
</html>

Centered Navbar

A three-column navbar that keeps navigation centred while retaining edge actions.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Centered Navbar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="dy-nav dy-nav__bar dy-nav__center" aria-label="Primary"><a class="dy-nav__brand" href="/">Orbit</a><div class="dy-nav__links"><a href="#work">Work</a><a href="#services">Services</a><a href="#journal">Journal</a></div><div class="dy-nav__actions"><a href="#contact">Contact</a></div></nav>
</body>
</html>

Responsive Mobile Navbar

A native disclosure-based mobile menu with keyboard-operable links and no JavaScript dependency.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Mobile Navbar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="dy-nav"><nav class="dy-nav__bar dy-nav__mobile" aria-label="Primary"><a class="dy-nav__brand" href="/">Canvas</a><details class="dy-nav__menu"><summary>Menu</summary><nav aria-label="Mobile"><a href="#overview">Overview</a><a href="#templates">Templates</a><a href="#pricing">Pricing</a><a href="#signin">Sign in</a></nav></details></nav></div>
</body>
</html>

Transparent Navbar

A restrained dark translucent navigation surface for use over simple hero backgrounds.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Transparent Navbar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="dy-nav dy-nav__bar dy-nav__transparent" aria-label="Primary"><a class="dy-nav__brand" href="/">Aperture</a><div class="dy-nav__links"><a href="#platform" aria-current="page">Platform</a><a href="#customers">Stories</a><a href="#company">Company</a></div><a class="dy-nav__cta" href="#demo">Book demo</a></nav>
</body>
</html>

Dashboard Navbar

An application header with workspace context, search and clearly labelled account access.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dashboard Navbar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="dy-nav dy-nav__bar" aria-label="Dashboard"><a class="dy-nav__brand" href="#dashboard">Atlas / Design</a><div class="dy-nav__actions"><a href="#search">Search</a><a href="#help">Help</a><a href="#account" aria-label="Open account for Alex Morgan">AM</a></div></nav>
</body>
</html>

Sidebar Navigation

A compact vertical application navigation with grouped destinations and current state.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sidebar Navigation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="dy-nav dy-sidebar" aria-label="Workspace"><a class="dy-nav__brand" href="#workspace">Studio</a><a href="#overview" aria-current="page">Overview</a><a href="#projects">Projects</a><a href="#activity">Activity</a><a href="#settings">Settings</a></nav>
</body>
</html>

Breadcrumb Navigation

An ordered breadcrumb trail that exposes the current location without making it a link.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Breadcrumb Navigation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="dy-nav dy-breadcrumb" aria-label="Breadcrumb"><ol><li><a href="#home">Home</a></li><li><a href="#components">Components</a></li><li><span aria-current="page">Navigation</span></li></ol></nav>
</body>
</html>

Pagination Navigation

A labelled pagination control with previous, next and current-page semantics.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pagination Navigation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="dy-nav dy-pagination" aria-label="Pagination"><ul><li><a href="#page-2" aria-label="Previous page">← Previous</a></li><li><a href="#page-1" aria-label="Page 1">1</a></li><li><a href="#page-2" aria-label="Page 2">2</a></li><li><a href="#page-3" aria-label="Page 3" aria-current="page">3</a></li><li><a href="#page-4" aria-label="Page 4">4</a></li><li><a href="#page-4" aria-label="Next page">Next →</a></li></ul></nav>
</body>
</html>

Tabs and Sub-navigation

Link-based sub-navigation for real routes, with a truthful current-page indicator.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tabs and Sub-navigation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="dy-nav dy-tabs" aria-label="Project sections"><div class="dy-nav__links"><a href="#overview" aria-current="page">Overview</a><a href="#activity">Activity</a><a href="#members">Members</a><a href="#settings">Settings</a></div></nav>
</body>
</html>

Implementation

Portable UI, with clear boundaries.

Replace example destinations with real routes. The mobile disclosure uses native details semantics; use application state only when your product needs more advanced menu control.

How to use

Choose the format used by your project.
Preview and copy one pattern, or download a focused ZIP.
Replace the example content and connect controls to real application behaviour.
Test keyboard access, contrast, validation and responsive behaviour in your final context.

FAQ

Navigation Pack questions

What formats does the Navigation Pack include?

The pack provides 6 focused frontend formats. Choose one format before copying or downloading so the archive stays small.

Do these patterns require third-party packages?

No runtime package is required. Tailwind-labelled downloads expect Tailwind CSS to already be configured in the receiving project.

Can I download one pattern?

Yes. Each pattern has its own ZIP, and the page also creates a complete pack ZIP for the selected format.