|$ curl https://forge-ai.dev/api/markdown?path=docs/components/navigation
$cat docs/navigation.md
updated Recently·18 min read·published
Navigation
Introduction
Navigation components guide users through an application. This guide covers production-ready patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including navbars, tabs, breadcrumbs, pagination, steppers, sidebars, and dropdowns.
ℹ
info
Always use semantic elements such as <nav>, <ol> for breadcrumbs, and <button> for interactive toggles. Screen readers rely on correct landmark and list roles.
Tabs
Underline, pill, and bordered tab styles for switching content panels.
tabs
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="tabs underline"> |
| 3 | <button class="active"> |
| 4 | Overview |
| 5 | </button> |
| 6 | <button> |
| 7 | Features |
| 8 | </button> |
| 9 | <button> |
| 10 | Pricing |
| 11 | </button> |
| 12 | <button> |
| 13 | FAQ |
| 14 | </button> |
| 15 | </div> |
| 16 | <div class="tabs pill"> |
| 17 | <button class="active"> |
| 18 | All |
| 19 | </button> |
| 20 | <button> |
| 21 | Images |
| 22 | </button> |
| 23 | <button> |
| 24 | Videos |
| 25 | </button> |
| 26 | <button> |
| 27 | Documents |
| 28 | </button> |
| 29 | </div> |
| 30 | <div class="tabs bordered"> |
| 31 | <button class="active"> |
| 32 | Preview |
| 33 | </button> |
| 34 | <button> |
| 35 | Code |
| 36 | </button> |
| 37 | <button> |
| 38 | Settings |
| 39 | </button> |
| 40 | </div> |
| 41 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:20px; |
| 16 | padding:20px; |
| 17 | max-width:520px; |
| 18 | margin:0 auto |
| 19 | } |
| 20 | .tabs { |
| 21 | display:flex; |
| 22 | gap:0 |
| 23 | } |
| 24 | .underline { |
| 25 | border-bottom:1px solid #222; |
| 26 | padding-bottom:0 |
| 27 | } |
| 28 | .underline button { |
| 29 | padding:10px 18px; |
| 30 | font-size:12px; |
| 31 | font-family:inherit; |
| 32 | background:none; |
| 33 | border:none; |
| 34 | color:#808080; |
| 35 | cursor:pointer; |
| 36 | border-bottom:2px solid transparent; |
| 37 | transition:all .2s; |
| 38 | margin-bottom:-1px |
| 39 | } |
| 40 | .underline button:hover { |
| 41 | color:#E0E0E0 |
| 42 | } |
| 43 | .underline button.active { |
| 44 | color:#00FF41; |
| 45 | border-bottom-color:#00FF41 |
| 46 | } |
| 47 | .pill { |
| 48 | background:#0A0A0A; |
| 49 | padding:4px; |
| 50 | border:1px solid #222; |
| 51 | border-radius:8px |
| 52 | } |
| 53 | .pill button { |
| 54 | padding:7px 16px; |
| 55 | font-size:11px; |
| 56 | font-weight:500; |
| 57 | font-family:inherit; |
| 58 | background:none; |
| 59 | border:none; |
| 60 | color:#808080; |
| 61 | cursor:pointer; |
| 62 | border-radius:6px; |
| 63 | transition:all .2s |
| 64 | } |
| 65 | .pill button:hover { |
| 66 | color:#E0E0E0 |
| 67 | } |
| 68 | .pill button.active { |
| 69 | background:#00FF41; |
| 70 | color:#0A0A0A; |
| 71 | font-weight:600 |
| 72 | } |
| 73 | .bordered { |
| 74 | border:1px solid #222; |
| 75 | border-radius:8px; |
| 76 | overflow:hidden |
| 77 | } |
| 78 | .bordered button { |
| 79 | padding:8px 18px; |
| 80 | font-size:11px; |
| 81 | font-weight:500; |
| 82 | font-family:inherit; |
| 83 | background:#0A0A0A; |
| 84 | border:none; |
| 85 | border-right:1px solid #222; |
| 86 | color:#808080; |
| 87 | cursor:pointer; |
| 88 | transition:all .2s |
| 89 | } |
| 90 | .bordered button:last-child { |
| 91 | border-right:none |
| 92 | } |
| 93 | .bordered button:hover { |
| 94 | color:#E0E0E0; |
| 95 | background:#111 |
| 96 | } |
| 97 | .bordered button.active { |
| 98 | background:#1A1A2E; |
| 99 | color:#00FF41 |
| 100 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-5 p-5 max-w-[520px] mx-auto bg-[#0A0A0A]"> |
| 2 | <div class="flex border-b border-[#222]"> |
| 3 | <button class="px-4 py-2.5 text-xs font-medium text-[#00FF41] border-b-2 border-[#00FF41] -mb-px"> |
| 4 | Overview |
| 5 | </button> |
| 6 | <button class="px-4 py-2.5 text-xs font-medium text-[#808080] hover:text-[#E0E0E0] transition-colors"> |
| 7 | Features |
| 8 | </button> |
| 9 | <button class="px-4 py-2.5 text-xs font-medium text-[#808080] hover:text-[#E0E0E0] transition-colors"> |
| 10 | Pricing |
| 11 | </button> |
| 12 | <button class="px-4 py-2.5 text-xs font-medium text-[#808080] hover:text-[#E0E0E0] transition-colors"> |
| 13 | FAQ |
| 14 | </button> |
| 15 | </div> |
| 16 | <div class="inline-flex p-1 border border-[#222] rounded-lg bg-[#0A0A0A]"> |
| 17 | <button class="px-4 py-1.5 rounded-md text-[11px] font-medium bg-[#00FF41] text-[#0A0A0A] font-semibold"> |
| 18 | All |
| 19 | </button> |
| 20 | <button class="px-4 py-1.5 rounded-md text-[11px] font-medium text-[#808080] hover:text-[#E0E0E0] transition-colors"> |
| 21 | Images |
| 22 | </button> |
| 23 | <button class="px-4 py-1.5 rounded-md text-[11px] font-medium text-[#808080] hover:text-[#E0E0E0] transition-colors"> |
| 24 | Videos |
| 25 | </button> |
| 26 | <button class="px-4 py-1.5 rounded-md text-[11px] font-medium text-[#808080] hover:text-[#E0E0E0] transition-colors"> |
| 27 | Documents |
| 28 | </button> |
| 29 | </div> |
| 30 | <div class="inline-flex border border-[#222] rounded-lg overflow-hidden"> |
| 31 | <button class="px-5 py-2 text-[11px] font-medium bg-[#1A1A2E] text-[#00FF41]"> |
| 32 | Preview |
| 33 | </button> |
| 34 | <button class="px-5 py-2 text-[11px] font-medium bg-[#0A0A0A] text-[#808080] border-l border-[#222] hover:text-[#E0E0E0] hover:bg-[#111] transition-colors"> |
| 35 | Code |
| 36 | </button> |
| 37 | <button class="px-5 py-2 text-[11px] font-medium bg-[#0A0A0A] text-[#808080] border-l border-[#222] hover:text-[#E0E0E0] hover:bg-[#111] transition-colors"> |
| 38 | Settings |
| 39 | </button> |
| 40 | </div> |
| 41 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-4 p-4 align-items-center"> |
| 2 | <ul class="nav nav-underline" style="border-bottom:1px solid #222;"> |
| 3 | <li class="nav-item"> |
| 4 | <a class="nav-link active" href="#" style="color:#00FF41;"> |
| 5 | Overview |
| 6 | </a> |
| 7 | </li> |
| 8 | <li class="nav-item"> |
| 9 | <a class="nav-link text-secondary" href="#"> |
| 10 | Features |
| 11 | </a> |
| 12 | </li> |
| 13 | <li class="nav-item"> |
| 14 | <a class="nav-link text-secondary" href="#"> |
| 15 | Pricing |
| 16 | </a> |
| 17 | </li> |
| 18 | <li class="nav-item"> |
| 19 | <a class="nav-link text-secondary" href="#"> |
| 20 | FAQ |
| 21 | </a> |
| 22 | </li> |
| 23 | </ul> |
| 24 | <ul class="nav nav-pills p-1 border border-secondary rounded" style="background:#0A0A0A;"> |
| 25 | <li class="nav-item"> |
| 26 | <a class="nav-link active fw-medium" href="#" style="background:#00FF41;color:#0A0A0A;"> |
| 27 | All |
| 28 | </a> |
| 29 | </li> |
| 30 | <li class="nav-item"> |
| 31 | <a class="nav-link text-secondary" href="#"> |
| 32 | Images |
| 33 | </a> |
| 34 | </li> |
| 35 | <li class="nav-item"> |
| 36 | <a class="nav-link text-secondary" href="#"> |
| 37 | Videos |
| 38 | </a> |
| 39 | </li> |
| 40 | <li class="nav-item"> |
| 41 | <a class="nav-link text-secondary" href="#"> |
| 42 | Documents |
| 43 | </a> |
| 44 | </li> |
| 45 | </ul> |
| 46 | <div class="btn-group" role="group"> |
| 47 | <button class="btn btn-outline-success active fw-medium" style="--bs-btn-color:#00FF41;--bs-btn-border-color:#222;--bs-btn-active-bg:#1A1A2E;--bs-btn-active-color:#00FF41;--bs-btn-hover-bg:#111;--bs-btn-hover-color:#E0E0E0;--bs-btn-hover-border-color:#222;"> |
| 48 | Preview |
| 49 | </button> |
| 50 | <button class="btn btn-outline-dark text-secondary fw-medium border-secondary" style="--bs-btn-hover-bg:#111;--bs-btn-hover-color:#E0E0E0;"> |
| 51 | Code |
| 52 | </button> |
| 53 | <button class="btn btn-outline-dark text-secondary fw-medium border-secondary" style="--bs-btn-hover-bg:#111;--bs-btn-hover-color:#E0E0E0;"> |
| 54 | Settings |
| 55 | </button> |
| 56 | </div> |
| 57 | </div> |
Vertical Tabs
A left-hand tab rail paired with a content area, ideal for settings and dashboards.
vertical-tabs
Live
untitled.html
HTML
| 1 | <div class="v-tabs"> |
| 2 | <div class="rail"> |
| 3 | <button class="active"> |
| 4 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 5 | <circle cx="12" cy="12" r="3"/> |
| 6 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 7 | </svg> |
| 8 | General |
| 9 | </button> |
| 10 | <button> |
| 11 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 12 | <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/> |
| 13 | <polyline points="22,6 12,13 2,6"/> |
| 14 | </svg> |
| 15 | Notifications |
| 16 | </button> |
| 17 | <button> |
| 18 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <rect x="1" y="4" width="22" height="16" rx="2"/> |
| 20 | <line x1="1" y1="10" x2="23" y2="10"/> |
| 21 | </svg> |
| 22 | Billing |
| 23 | </button> |
| 24 | <button> |
| 25 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 26 | <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> |
| 27 | </svg> |
| 28 | Security |
| 29 | </button> |
| 30 | </div> |
| 31 | <div class="panel"> |
| 32 | <h3> |
| 33 | General Settings |
| 34 | </h3> |
| 35 | <p> |
| 36 | Manage your profile, language, and default workspace preferences from this panel. |
| 37 | </p> |
| 38 | </div> |
| 39 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .v-tabs { |
| 13 | display:flex; |
| 14 | gap:0; |
| 15 | max-width:560px; |
| 16 | margin:0 auto; |
| 17 | background:#0F0F0F; |
| 18 | border:1px solid #222; |
| 19 | border-radius:12px; |
| 20 | overflow:hidden; |
| 21 | height:220px |
| 22 | } |
| 23 | .rail { |
| 24 | width:170px; |
| 25 | background:#0A0A0A; |
| 26 | border-right:1px solid #222; |
| 27 | padding:12px; |
| 28 | display:flex; |
| 29 | flex-direction:column; |
| 30 | gap:4px |
| 31 | } |
| 32 | .rail button { |
| 33 | display:flex; |
| 34 | align-items:center; |
| 35 | gap:10px; |
| 36 | padding:9px 10px; |
| 37 | border-radius:6px; |
| 38 | font-size:11px; |
| 39 | font-weight:500; |
| 40 | font-family:inherit; |
| 41 | background:transparent; |
| 42 | border:none; |
| 43 | color:#808080; |
| 44 | cursor:pointer; |
| 45 | text-align:left; |
| 46 | transition:all .2s |
| 47 | } |
| 48 | .rail button:hover { |
| 49 | color:#E0E0E0; |
| 50 | background:rgba(255, |
| 51 | 255, |
| 52 | 255, |
| 53 | .04) |
| 54 | } |
| 55 | .rail button.active { |
| 56 | background:rgba(0, |
| 57 | 255, |
| 58 | 65, |
| 59 | .08); |
| 60 | color:#00FF41; |
| 61 | font-weight:600 |
| 62 | } |
| 63 | .panel { |
| 64 | flex:1; |
| 65 | padding:20px |
| 66 | } |
| 67 | .panel h3 { |
| 68 | font-size:14px; |
| 69 | font-weight:600; |
| 70 | color:#E0E0E0; |
| 71 | margin-bottom:8px |
| 72 | } |
| 73 | .panel p { |
| 74 | font-size:12px; |
| 75 | line-height:1.6; |
| 76 | color:#808080 |
| 77 | } |
untitled.html
HTML
| 1 | <div class="flex max-w-[560px] mx-auto h-[220px] bg-[#0F0F0F] border border-[#222] rounded-xl overflow-hidden"> |
| 2 | <div class="w-[170px] bg-[#0A0A0A] border-r border-[#222] p-3 flex flex-col gap-1"> |
| 3 | <button class="flex items-center gap-2.5 px-2.5 py-2 rounded-md text-[11px] font-semibold bg-[#00FF41]/[0.08] text-[#00FF41] text-left transition-colors"> |
| 4 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 5 | <circle cx="12" cy="12" r="3"/> |
| 6 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 7 | </svg> |
| 8 | General |
| 9 | </button> |
| 10 | <button class="flex items-center gap-2.5 px-2.5 py-2 rounded-md text-[11px] font-medium text-[#808080] hover:text-[#E0E0E0] hover:bg-white/[0.04] text-left transition-colors"> |
| 11 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 12 | <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/> |
| 13 | <polyline points="22,6 12,13 2,6"/> |
| 14 | </svg> |
| 15 | Notifications |
| 16 | </button> |
| 17 | <button class="flex items-center gap-2.5 px-2.5 py-2 rounded-md text-[11px] font-medium text-[#808080] hover:text-[#E0E0E0] hover:bg-white/[0.04] text-left transition-colors"> |
| 18 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <rect x="1" y="4" width="22" height="16" rx="2"/> |
| 20 | <line x1="1" y1="10" x2="23" y2="10"/> |
| 21 | </svg> |
| 22 | Billing |
| 23 | </button> |
| 24 | <button class="flex items-center gap-2.5 px-2.5 py-2 rounded-md text-[11px] font-medium text-[#808080] hover:text-[#E0E0E0] hover:bg-white/[0.04] text-left transition-colors"> |
| 25 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 26 | <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> |
| 27 | </svg> |
| 28 | Security |
| 29 | </button> |
| 30 | </div> |
| 31 | <div class="flex-1 p-5"> |
| 32 | <h3 class="text-sm font-semibold text-[#E0E0E0] mb-2"> |
| 33 | General Settings |
| 34 | </h3> |
| 35 | <p class="text-xs leading-relaxed text-[#808080]"> |
| 36 | Manage your profile, language, and default workspace preferences from this panel. |
| 37 | </p> |
| 38 | </div> |
| 39 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex bg-dark border border-secondary rounded overflow-hidden" style="max-width:560px;height:220px;margin:0 auto;"> |
| 2 | <div class="nav flex-column nav-pills p-3 gap-1 border-end border-secondary" style="width:170px;background:#0A0A0A;" role="tablist"> |
| 3 | <button class="nav-link active d-flex align-items-center gap-2 fw-medium" style="background:#00FF41;color:#0A0A0A;" type="button"> |
| 4 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 5 | <circle cx="12" cy="12" r="3"/> |
| 6 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 7 | </svg> |
| 8 | General |
| 9 | </button> |
| 10 | <button class="nav-link text-secondary d-flex align-items-center gap-2" type="button"> |
| 11 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 12 | <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/> |
| 13 | <polyline points="22,6 12,13 2,6"/> |
| 14 | </svg> |
| 15 | Notifications |
| 16 | </button> |
| 17 | <button class="nav-link text-secondary d-flex align-items-center gap-2" type="button"> |
| 18 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <rect x="1" y="4" width="22" height="16" rx="2"/> |
| 20 | <line x1="1" y1="10" x2="23" y2="10"/> |
| 21 | </svg> |
| 22 | Billing |
| 23 | </button> |
| 24 | <button class="nav-link text-secondary d-flex align-items-center gap-2" type="button"> |
| 25 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 26 | <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> |
| 27 | </svg> |
| 28 | Security |
| 29 | </button> |
| 30 | </div> |
| 31 | <div class="p-4 flex-fill"> |
| 32 | <h5 class="text-white"> |
| 33 | General Settings |
| 34 | </h5> |
| 35 | <p class="text-secondary small mb-0"> |
| 36 | Manage your profile, language, and default workspace preferences from this panel. |
| 37 | </p> |
| 38 | </div> |
| 39 | </div> |
Pagination
Numbered pagination with ellipsis and a minimal previous/next variant.
pagination
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <nav class="pages" aria-label="Pagination"> |
| 3 | <button class="p-btn" aria-label="Previous"> |
| 4 | Prev |
| 5 | </button> |
| 6 | <button class="p-btn active" aria-current="page"> |
| 7 | 1 |
| 8 | </button> |
| 9 | <button class="p-btn"> |
| 10 | 2 |
| 11 | </button> |
| 12 | <button class="p-btn"> |
| 13 | 3 |
| 14 | </button> |
| 15 | <span class="dots"> |
| 16 | ... |
| 17 | </span> |
| 18 | <button class="p-btn"> |
| 19 | 12 |
| 20 | </button> |
| 21 | <button class="p-btn" aria-label="Next"> |
| 22 | Next |
| 23 | </button> |
| 24 | </nav> |
| 25 | <div class="simple"> |
| 26 | <button class="s-btn"> |
| 27 | ← Previous |
| 28 | </button> |
| 29 | <span class="info"> |
| 30 | Page 3 of 12 |
| 31 | </span> |
| 32 | <button class="s-btn"> |
| 33 | Next → |
| 34 | </button> |
| 35 | </div> |
| 36 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:16px; |
| 16 | padding:20px; |
| 17 | align-items:center |
| 18 | } |
| 19 | .pages { |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | gap:4px |
| 23 | } |
| 24 | .p-btn { |
| 25 | padding:6px 11px; |
| 26 | border-radius:6px; |
| 27 | font-size:11px; |
| 28 | font-weight:500; |
| 29 | font-family:inherit; |
| 30 | border:1px solid #2A2A3E; |
| 31 | background:#0A0A0A; |
| 32 | color:#808080; |
| 33 | cursor:pointer; |
| 34 | transition:all .2s |
| 35 | } |
| 36 | .p-btn:hover { |
| 37 | background:#1A1A2E; |
| 38 | color:#E0E0E0 |
| 39 | } |
| 40 | .p-btn.active { |
| 41 | background:#00FF41; |
| 42 | color:#0A0A0A; |
| 43 | border-color:#00FF41; |
| 44 | font-weight:600 |
| 45 | } |
| 46 | .dots { |
| 47 | padding:0 4px; |
| 48 | color:#525252; |
| 49 | font-size:12px |
| 50 | } |
| 51 | .simple { |
| 52 | display:flex; |
| 53 | align-items:center; |
| 54 | gap:16px |
| 55 | } |
| 56 | .s-btn { |
| 57 | padding:6px 16px; |
| 58 | border-radius:6px; |
| 59 | font-size:11px; |
| 60 | font-weight:500; |
| 61 | font-family:inherit; |
| 62 | border:1px solid #2A2A3E; |
| 63 | background:transparent; |
| 64 | color:#808080; |
| 65 | cursor:pointer; |
| 66 | transition:all .2s |
| 67 | } |
| 68 | .s-btn:hover { |
| 69 | background:#1A1A2E; |
| 70 | color:#E0E0E0 |
| 71 | } |
| 72 | .info { |
| 73 | font-size:11px; |
| 74 | color:#525252 |
| 75 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-4 p-5 items-center bg-[#0A0A0A]"> |
| 2 | <nav aria-label="Pagination" class="flex items-center gap-1"> |
| 3 | <button aria-label="Previous" class="px-2.5 py-1.5 rounded-md text-[11px] font-medium border border-[#2A2A3E] bg-[#0A0A0A] text-[#808080] hover:bg-[#1A1A2E] hover:text-[#E0E0E0] transition-colors"> |
| 4 | Prev |
| 5 | </button> |
| 6 | <button aria-current="page" class="px-2.5 py-1.5 rounded-md text-[11px] font-semibold border border-[#00FF41] bg-[#00FF41] text-[#0A0A0A]"> |
| 7 | 1 |
| 8 | </button> |
| 9 | <button class="px-2.5 py-1.5 rounded-md text-[11px] font-medium border border-[#2A2A3E] bg-[#0A0A0A] text-[#808080] hover:bg-[#1A1A2E] hover:text-[#E0E0E0] transition-colors"> |
| 10 | 2 |
| 11 | </button> |
| 12 | <button class="px-2.5 py-1.5 rounded-md text-[11px] font-medium border border-[#2A2A3E] bg-[#0A0A0A] text-[#808080] hover:bg-[#1A1A2E] hover:text-[#E0E0E0] transition-colors"> |
| 13 | 3 |
| 14 | </button> |
| 15 | <span class="px-1 text-[#525252] text-xs"> |
| 16 | ... |
| 17 | </span> |
| 18 | <button class="px-2.5 py-1.5 rounded-md text-[11px] font-medium border border-[#2A2A3E] bg-[#0A0A0A] text-[#808080] hover:bg-[#1A1A2E] hover:text-[#E0E0E0] transition-colors"> |
| 19 | 12 |
| 20 | </button> |
| 21 | <button aria-label="Next" class="px-2.5 py-1.5 rounded-md text-[11px] font-medium border border-[#2A2A3E] bg-[#0A0A0A] text-[#808080] hover:bg-[#1A1A2E] hover:text-[#E0E0E0] transition-colors"> |
| 22 | Next |
| 23 | </button> |
| 24 | </nav> |
| 25 | <div class="flex items-center gap-4"> |
| 26 | <button class="px-4 py-1.5 rounded-md text-[11px] font-medium border border-[#2A2A3E] bg-transparent text-[#808080] hover:bg-[#1A1A2E] hover:text-[#E0E0E0] transition-colors"> |
| 27 | ← Previous |
| 28 | </button> |
| 29 | <span class="text-[11px] text-[#525252]"> |
| 30 | Page 3 of 12 |
| 31 | </span> |
| 32 | <button class="px-4 py-1.5 rounded-md text-[11px] font-medium border border-[#2A2A3E] bg-transparent text-[#808080] hover:bg-[#1A1A2E] hover:text-[#E0E0E0] transition-colors"> |
| 33 | Next → |
| 34 | </button> |
| 35 | </div> |
| 36 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-4 p-4 align-items-center"> |
| 2 | <nav aria-label="Page navigation"> |
| 3 | <ul class="pagination mb-0" style="--bs-pagination-bg:#0A0A0A;--bs-pagination-border-color:#2A2A3E;--bs-pagination-color:#808080;--bs-pagination-hover-bg:#1A1A2E;--bs-pagination-hover-color:#E0E0E0;--bs-pagination-hover-border-color:#2A2A3E;--bs-pagination-active-bg:#00FF41;--bs-pagination-active-color:#0A0A0A;--bs-pagination-active-border-color:#00FF41;"> |
| 4 | <li class="page-item"> |
| 5 | <a class="page-link" href="#"> |
| 6 | Prev |
| 7 | </a> |
| 8 | </li> |
| 9 | <li class="page-item active"> |
| 10 | <a class="page-link" href="#"> |
| 11 | 1 |
| 12 | </a> |
| 13 | </li> |
| 14 | <li class="page-item"> |
| 15 | <a class="page-link" href="#"> |
| 16 | 2 |
| 17 | </a> |
| 18 | </li> |
| 19 | <li class="page-item"> |
| 20 | <a class="page-link" href="#"> |
| 21 | 3 |
| 22 | </a> |
| 23 | </li> |
| 24 | <li class="page-item disabled"> |
| 25 | <span class="page-link" style="background:#0A0A0A;border-color:#2A2A3E;color:#525252;"> |
| 26 | ... |
| 27 | </span> |
| 28 | </li> |
| 29 | <li class="page-item"> |
| 30 | <a class="page-link" href="#"> |
| 31 | 12 |
| 32 | </a> |
| 33 | </li> |
| 34 | <li class="page-item"> |
| 35 | <a class="page-link" href="#"> |
| 36 | Next |
| 37 | </a> |
| 38 | </li> |
| 39 | </ul> |
| 40 | </nav> |
| 41 | <div class="d-flex align-items-center gap-3"> |
| 42 | <button class="btn btn-outline-dark border-secondary text-secondary btn-sm"> |
| 43 | ← Previous |
| 44 | </button> |
| 45 | <span class="text-secondary small"> |
| 46 | Page 3 of 12 |
| 47 | </span> |
| 48 | <button class="btn btn-outline-dark border-secondary text-secondary btn-sm"> |
| 49 | Next → |
| 50 | </button> |
| 51 | </div> |
| 52 | </div> |
Step Indicator
Progress stepper showing completed, current, and upcoming steps.
steps
Live
untitled.html
HTML
| 1 | <div class="stepper" aria-label="Checkout progress"> |
| 2 | <div class="step done"> |
| 3 | <div class="circle"> |
| 4 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 5 | <polyline points="20 6 9 17 4 12"/> |
| 6 | </svg> |
| 7 | </div> |
| 8 | <span> |
| 9 | Cart |
| 10 | </span> |
| 11 | </div> |
| 12 | <div class="line done"> |
| 13 | </div> |
| 14 | <div class="step active"> |
| 15 | <div class="circle"> |
| 16 | 2 |
| 17 | </div> |
| 18 | <span> |
| 19 | Shipping |
| 20 | </span> |
| 21 | </div> |
| 22 | <div class="line"> |
| 23 | </div> |
| 24 | <div class="step"> |
| 25 | <div class="circle"> |
| 26 | 3 |
| 27 | </div> |
| 28 | <span> |
| 29 | Payment |
| 30 | </span> |
| 31 | </div> |
| 32 | <div class="line"> |
| 33 | </div> |
| 34 | <div class="step"> |
| 35 | <div class="circle"> |
| 36 | 4 |
| 37 | </div> |
| 38 | <span> |
| 39 | Confirm |
| 40 | </span> |
| 41 | </div> |
| 42 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .stepper { |
| 13 | display:flex; |
| 14 | align-items:center; |
| 15 | justify-content:center; |
| 16 | gap:0; |
| 17 | padding:24px |
| 18 | } |
| 19 | .step { |
| 20 | display:flex; |
| 21 | flex-direction:column; |
| 22 | align-items:center; |
| 23 | gap:6px |
| 24 | } |
| 25 | .circle { |
| 26 | width:32px; |
| 27 | height:32px; |
| 28 | border-radius:50%; |
| 29 | display:flex; |
| 30 | align-items:center; |
| 31 | justify-content:center; |
| 32 | font-size:12px; |
| 33 | font-weight:700; |
| 34 | transition:all .3s |
| 35 | } |
| 36 | .done .circle { |
| 37 | background:#00FF41; |
| 38 | color:#0A0A0A |
| 39 | } |
| 40 | .active .circle { |
| 41 | background:#00FF41; |
| 42 | color:#0A0A0A; |
| 43 | box-shadow:0 0 0 4px rgba(0, |
| 44 | 255, |
| 45 | 65, |
| 46 | .2) |
| 47 | } |
| 48 | .step:not(.done):not(.active) .circle { |
| 49 | background:#0A0A0A; |
| 50 | border:2px solid #333; |
| 51 | color:#525252 |
| 52 | } |
| 53 | .step span { |
| 54 | font-size:10px; |
| 55 | color:#808080; |
| 56 | font-weight:500 |
| 57 | } |
| 58 | .done span { |
| 59 | color:#00FF41 |
| 60 | } |
| 61 | .active span { |
| 62 | color:#E0E0E0 |
| 63 | } |
| 64 | .line { |
| 65 | width:40px; |
| 66 | height:2px; |
| 67 | background:#222; |
| 68 | margin:0 4px; |
| 69 | margin-bottom:22px |
| 70 | } |
| 71 | .line.done { |
| 72 | background:#00FF41 |
| 73 | } |
untitled.html
HTML
| 1 | <div aria-label="Checkout progress" class="flex items-center justify-center gap-0 p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex flex-col items-center gap-1.5"> |
| 3 | <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold bg-[#00FF41] text-[#0A0A0A]"> |
| 4 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 5 | <polyline points="20 6 9 17 4 12"/> |
| 6 | </svg> |
| 7 | </div> |
| 8 | <span class="text-[10px] font-medium text-[#00FF41]"> |
| 9 | Cart |
| 10 | </span> |
| 11 | </div> |
| 12 | <div class="w-10 h-0.5 bg-[#00FF41] mx-1 mb-5"> |
| 13 | </div> |
| 14 | <div class="flex flex-col items-center gap-1.5"> |
| 15 | <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold bg-[#00FF41] text-[#0A0A0A] shadow-[0_0_0_4px_rgba(0,255,65,0.2)]"> |
| 16 | 2 |
| 17 | </div> |
| 18 | <span class="text-[10px] font-medium text-[#E0E0E0]"> |
| 19 | Shipping |
| 20 | </span> |
| 21 | </div> |
| 22 | <div class="w-10 h-0.5 bg-[#222] mx-1 mb-5"> |
| 23 | </div> |
| 24 | <div class="flex flex-col items-center gap-1.5"> |
| 25 | <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold bg-[#0A0A0A] border-2 border-[#333] text-[#525252]"> |
| 26 | 3 |
| 27 | </div> |
| 28 | <span class="text-[10px] font-medium text-[#808080]"> |
| 29 | Payment |
| 30 | </span> |
| 31 | </div> |
| 32 | <div class="w-10 h-0.5 bg-[#222] mx-1 mb-5"> |
| 33 | </div> |
| 34 | <div class="flex flex-col items-center gap-1.5"> |
| 35 | <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold bg-[#0A0A0A] border-2 border-[#333] text-[#525252]"> |
| 36 | 4 |
| 37 | </div> |
| 38 | <span class="text-[10px] font-medium text-[#808080]"> |
| 39 | Confirm |
| 40 | </span> |
| 41 | </div> |
| 42 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex align-items-center justify-content-center gap-0 p-4"> |
| 2 | <div class="d-flex flex-column align-items-center gap-1"> |
| 3 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width:32px;height:32px;background:#00FF41;color:#0A0A0A;"> |
| 4 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 5 | <polyline points="20 6 9 17 4 12"/> |
| 6 | </svg> |
| 7 | </div> |
| 8 | <span class="small" style="color:#00FF41;font-size:10px;"> |
| 9 | Cart |
| 10 | </span> |
| 11 | </div> |
| 12 | <div style="width:40px;height:2px;background:#00FF41;margin:0 4px 22px;"> |
| 13 | </div> |
| 14 | <div class="d-flex flex-column align-items-center gap-1"> |
| 15 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width:32px;height:32px;background:#00FF41;color:#0A0A0A;box-shadow:0 0 0 4px rgba(0,255,65,.2);"> |
| 16 | 2 |
| 17 | </div> |
| 18 | <span class="small text-white" style="font-size:10px;"> |
| 19 | Shipping |
| 20 | </span> |
| 21 | </div> |
| 22 | <div style="width:40px;height:2px;background:#222;margin:0 4px 22px;"> |
| 23 | </div> |
| 24 | <div class="d-flex flex-column align-items-center gap-1"> |
| 25 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width:32px;height:32px;background:#0A0A0A;border:2px solid #333;color:#525252;"> |
| 26 | 3 |
| 27 | </div> |
| 28 | <span class="small text-secondary" style="font-size:10px;"> |
| 29 | Payment |
| 30 | </span> |
| 31 | </div> |
| 32 | <div style="width:40px;height:2px;background:#222;margin:0 4px 22px;"> |
| 33 | </div> |
| 34 | <div class="d-flex flex-column align-items-center gap-1"> |
| 35 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width:32px;height:32px;background:#0A0A0A;border:2px solid #333;color:#525252;"> |
| 36 | 4 |
| 37 | </div> |
| 38 | <span class="small text-secondary" style="font-size:10px;"> |
| 39 | Confirm |
| 40 | </span> |
| 41 | </div> |
| 42 | </div> |
Dropdown Menu
Accessible dropdown using the HTML5 <details> element — no JavaScript required.
dropdown
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <details class="dropdown"> |
| 3 | <summary class="drop-trigger" aria-haspopup="true"> |
| 4 | Account |
| 5 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 6 | <polyline points="6 9 12 15 18 9"/> |
| 7 | </svg> |
| 8 | </summary> |
| 9 | <div class="drop-menu" role="menu"> |
| 10 | <a href="#" class="drop-item" role="menuitem"> |
| 11 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 12 | <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/> |
| 13 | <circle cx="12" cy="7" r="4"/> |
| 14 | </svg> |
| 15 | Profile |
| 16 | </a> |
| 17 | <a href="#" class="drop-item" role="menuitem"> |
| 18 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <circle cx="12" cy="12" r="3"/> |
| 20 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 21 | </svg> |
| 22 | Settings |
| 23 | </a> |
| 24 | <div class="drop-divider"> |
| 25 | </div> |
| 26 | <a href="#" class="drop-item danger" role="menuitem"> |
| 27 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 28 | <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/> |
| 29 | <polyline points="16 17 21 12 16 7"/> |
| 30 | <line x1="21" y1="12" x2="9" y2="12"/> |
| 31 | </svg> |
| 32 | Logout |
| 33 | </a> |
| 34 | </div> |
| 35 | </details> |
| 36 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | justify-content:center; |
| 15 | padding:28px |
| 16 | } |
| 17 | .dropdown { |
| 18 | position:relative; |
| 19 | display:inline-block |
| 20 | } |
| 21 | .drop-trigger { |
| 22 | display:flex; |
| 23 | align-items:center; |
| 24 | gap:8px; |
| 25 | padding:8px 14px; |
| 26 | border-radius:8px; |
| 27 | font-size:12px; |
| 28 | font-weight:600; |
| 29 | color:#E0E0E0; |
| 30 | background:#0F0F0F; |
| 31 | border:1px solid #222; |
| 32 | cursor:pointer; |
| 33 | list-style:none |
| 34 | } |
| 35 | .drop-trigger::-webkit-details-marker { |
| 36 | display:none |
| 37 | } |
| 38 | .drop-trigger svg { |
| 39 | transition:transform .2s |
| 40 | } |
| 41 | .dropdown[open] .drop-trigger svg { |
| 42 | transform:rotate(180deg) |
| 43 | } |
| 44 | .drop-menu { |
| 45 | position:absolute; |
| 46 | top:calc(100% + 6px); |
| 47 | left:0; |
| 48 | min-width:180px; |
| 49 | background:#0F0F0F; |
| 50 | border:1px solid #222; |
| 51 | border-radius:10px; |
| 52 | padding:6px; |
| 53 | box-shadow:0 10px 30px rgba(0, |
| 54 | 0, |
| 55 | 0, |
| 56 | .5); |
| 57 | z-index:10 |
| 58 | } |
| 59 | .drop-item { |
| 60 | display:flex; |
| 61 | align-items:center; |
| 62 | gap:10px; |
| 63 | padding:8px 10px; |
| 64 | border-radius:6px; |
| 65 | font-size:12px; |
| 66 | color:#A0A0A0; |
| 67 | text-decoration:none; |
| 68 | transition:all .2s |
| 69 | } |
| 70 | .drop-item:hover { |
| 71 | background:rgba(255, |
| 72 | 255, |
| 73 | 255, |
| 74 | .05); |
| 75 | color:#E0E0E0 |
| 76 | } |
| 77 | .drop-item.danger:hover { |
| 78 | background:rgba(239, |
| 79 | 68, |
| 80 | 68, |
| 81 | .1); |
| 82 | color:#EF4444 |
| 83 | } |
| 84 | .drop-divider { |
| 85 | height:1px; |
| 86 | background:#222; |
| 87 | margin:6px 0 |
| 88 | } |
| 89 | .drop-item svg { |
| 90 | flex-shrink:0 |
| 91 | } |
untitled.html
HTML
| 1 | <div class="flex justify-center p-7 bg-[#0A0A0A]"> |
| 2 | <details class="relative inline-block"> |
| 3 | <summary class="flex items-center gap-2 px-3.5 py-2 rounded-lg text-xs font-semibold text-[#E0E0E0] bg-[#0F0F0F] border border-[#222] cursor-pointer list-none"> |
| 4 | Account |
| 5 | <svg class="w-3 h-3 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 6 | <polyline points="6 9 12 15 18 9"/> |
| 7 | </svg> |
| 8 | </summary> |
| 9 | <div class="absolute top-[calc(100%+6px)] left-0 min-w-[180px] bg-[#0F0F0F] border border-[#222] rounded-xl p-1.5 shadow-[0_10px_30px_rgba(0,0,0,0.5)] z-10" role="menu"> |
| 10 | <a href="#" class="flex items-center gap-2.5 px-2.5 py-2 rounded-md text-xs text-[#A0A0A0] hover:bg-white/5 hover:text-[#E0E0E0] transition-colors" role="menuitem"> |
| 11 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 12 | <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/> |
| 13 | <circle cx="12" cy="7" r="4"/> |
| 14 | </svg> |
| 15 | Profile |
| 16 | </a> |
| 17 | <a href="#" class="flex items-center gap-2.5 px-2.5 py-2 rounded-md text-xs text-[#A0A0A0] hover:bg-white/5 hover:text-[#E0E0E0] transition-colors" role="menuitem"> |
| 18 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <circle cx="12" cy="12" r="3"/> |
| 20 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 21 | </svg> |
| 22 | Settings |
| 23 | </a> |
| 24 | <div class="h-px bg-[#222] my-1.5"> |
| 25 | </div> |
| 26 | <a href="#" class="flex items-center gap-2.5 px-2.5 py-2 rounded-md text-xs text-[#A0A0A0] hover:bg-[rgba(239,68,68,0.1)] hover:text-[#EF4444] transition-colors" role="menuitem"> |
| 27 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 28 | <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/> |
| 29 | <polyline points="16 17 21 12 16 7"/> |
| 30 | <line x1="21" y1="12" x2="9" y2="12"/> |
| 31 | </svg> |
| 32 | Logout |
| 33 | </a> |
| 34 | </div> |
| 35 | </details> |
| 36 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex justify-content-center p-4"> |
| 2 | <div class="dropdown"> |
| 3 | <button class="btn btn-dark border-secondary dropdown-toggle d-inline-flex align-items-center gap-2" type="button" data-bs-toggle="dropdown" aria-expanded="false"> |
| 4 | Account |
| 5 | </button> |
| 6 | <ul class="dropdown-menu dropdown-menu-dark border-secondary" style="background:#0F0F0F;"> |
| 7 | <li> |
| 8 | <a class="dropdown-item d-flex align-items-center gap-2 text-secondary" href="#"> |
| 9 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 10 | <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/> |
| 11 | <circle cx="12" cy="7" r="4"/> |
| 12 | </svg> |
| 13 | Profile |
| 14 | </a> |
| 15 | </li> |
| 16 | <li> |
| 17 | <a class="dropdown-item d-flex align-items-center gap-2 text-secondary" href="#"> |
| 18 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <circle cx="12" cy="12" r="3"/> |
| 20 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 21 | </svg> |
| 22 | Settings |
| 23 | </a> |
| 24 | </li> |
| 25 | <li> |
| 26 | <hr class="dropdown-divider border-secondary"> |
| 27 | </li> |
| 28 | <li> |
| 29 | <a class="dropdown-item d-flex align-items-center gap-2" href="#" style="color:#EF4444;"> |
| 30 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 31 | <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/> |
| 32 | <polyline points="16 17 21 12 16 7"/> |
| 33 | <line x1="21" y1="12" x2="9" y2="12"/> |
| 34 | </svg> |
| 35 | Logout |
| 36 | </a> |
| 37 | </li> |
| 38 | </ul> |
| 39 | </div> |
| 40 | </div> |
Accessibility
Navigation must be usable with a keyboard, a screen reader, and at high zoom. Use clear focus indicators and semantic roles so users always know where they are.
- Wrap primary navigation in a <nav> element and give it an aria-label when there are multiple nav regions.
- Mark the current page or tab with aria-current="page" or aria-selected="true".
- Breadcrumbs should use an ordered list (<ol>) so screen readers announce the hierarchy.
- Ensure focus indicators are visible for every interactive link, button, and tab.
- Dropdown toggles need aria-expanded and aria-haspopup if controlled by JavaScript.
- Icon-only buttons and links require an aria-label that describes the destination or action.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.