|$ curl https://forge-ai.dev/api/markdown?path=docs/components/navigation
$cat docs/navigation.md
updated Recently·12 min read·published
Navigation
◆CSS◆HTML◆UI◆Intermediate
10+ navigation components — navbar, tabs, breadcrumbs, pagination, steps, and sidebar menus.
Tabs
Three tab styles: underline, pill, and bordered.
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> |
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:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:20px; |
| 16 | padding:20px; |
| 17 | max-width:480px; |
| 18 | margin:0 auto |
| 19 | } |
| 20 | .tabs { |
| 21 | display:flex; |
| 22 | gap:0; |
| 23 | background:#0A0A0A; |
| 24 | border-radius:8px |
| 25 | } |
| 26 | .underline { |
| 27 | border-bottom:1px solid #222; |
| 28 | border-radius:0; |
| 29 | padding-bottom:0 |
| 30 | } |
| 31 | .underline button { |
| 32 | padding:10px 18px; |
| 33 | font-size:12px; |
| 34 | font-family:inherit; |
| 35 | background:none; |
| 36 | border:none; |
| 37 | color:#808080; |
| 38 | cursor:pointer; |
| 39 | border-bottom:2px solid transparent; |
| 40 | transition:all .2s; |
| 41 | margin-bottom:-1px |
| 42 | } |
| 43 | .underline button:hover { |
| 44 | color:#E0E0E0 |
| 45 | } |
| 46 | .underline button.active { |
| 47 | color:#00FF41; |
| 48 | border-bottom-color:#00FF41 |
| 49 | } |
| 50 | .pill { |
| 51 | background:#0A0A0A; |
| 52 | padding:4px; |
| 53 | border:1px solid #222 |
| 54 | } |
| 55 | .pill button { |
| 56 | padding:6px 16px; |
| 57 | font-size:11px; |
| 58 | font-weight:500; |
| 59 | font-family:inherit; |
| 60 | background:none; |
| 61 | border:none; |
| 62 | color:#808080; |
| 63 | cursor:pointer; |
| 64 | border-radius:6px; |
| 65 | transition:all .2s |
| 66 | } |
| 67 | .pill button:hover { |
| 68 | color:#E0E0E0 |
| 69 | } |
| 70 | .pill button.active { |
| 71 | background:#00FF41; |
| 72 | color:#0A0A0A; |
| 73 | font-weight:600 |
| 74 | } |
Pagination
Simple and numbered pagination for list navigation.
pagination
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="pages"> |
| 3 | <button class="p-btn"> |
| 4 | Prev |
| 5 | </button> |
| 6 | <button class="p-btn active"> |
| 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"> |
| 22 | Next |
| 23 | </button> |
| 24 | </div> |
| 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:#0D0D0D; |
| 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 | } |
Step Indicator
Progress stepper showing current step with completed and upcoming states.
steps
Live
untitled.html
HTML
| 1 | <div class="stepper"> |
| 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:#0D0D0D; |
| 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 | } |