Sidebar Navigation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

<!-- Snippet Name: Sidebar Navigation | Family: Navigation | Description: App sidebar + content area, collapsible on mobile. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sidebar Navigation | DevSnips</title>
  <meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: sidebar-navigation. Copy, customize, ship.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  <style>  /* ---- Neo-Brutalist design tokens ---- */
  :root{
    --bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
    --border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
    --accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
    --radius:6px; --radius-lg:10px;
    --shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
    --ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
    --container:1200px; --gutter:20px;
    --fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
    --fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
    --ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
      --border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
  }
  /* ---- base layout + components ---- */
  *{box-sizing:border-box}
  .nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
    line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
  .nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
  .nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
  .nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
  .nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
  .nb p{margin:0} .nb a{color:inherit}
  .nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.14em;
    border:2px solid var(--border);background:var(--surface);padding:6px 12px;
    border-radius:999px;box-shadow:var(--shadow)}
  .nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
  .nb .muted{color:var(--muted)}
  .nb .center{text-align:center;margin-inline:auto}
  .nb .grid{display:grid;gap:var(--gutter)}
  .nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
    text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
    padding:14px 22px;background:var(--primary);color:var(--primary-fg);
    box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
  .nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
  .nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
  .nb .btn.outline{background:var(--surface);color:var(--foreground)}
  .nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
  .nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
  .nb .btn.accent{background:var(--accent);color:#0a0a0a}
  .nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
  .nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
  .nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
    padding:4px 10px;border-radius:999px;background:var(--surface)}
  .nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
  .nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
    padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
  .nb .skip:focus{left:8px}
  .nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
  @media (prefers-reduced-motion:reduce){
    .nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
      transition-duration:.001ms!important;animation-iteration-count:1!important}
  }

  .sn{display:grid;grid-template-columns:1fr;min-height:100vh}
  .sn .side{position:sticky;top:0;align-self:start;height:100vh;background:var(--surface);border-right:3px solid var(--border);padding:18px;display:flex;flex-direction:column;gap:6px;display:none}
  .sn .side .brand{font-weight:900;font-size:1.1rem;display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .sn .side .brand .mark{width:30px;height:30px;background:var(--primary);border:3px solid var(--border);border-radius:8px}
  .sn .side a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;text-decoration:none;font-weight:600;color:var(--muted)}
  .sn .side a:hover,.sn .side a[aria-current="true"]{background:var(--bg);color:var(--foreground);box-shadow:var(--shadow)}
  .sn .side .grp{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:14px 8px 6px}
  .sn .side .foot{margin-top:auto;font-size:.8rem;color:var(--muted)}
  .sn .main{padding:24px}
  .sn .topbar{display:flex;align-items:center;gap:12px;margin-bottom:20px}
  .sn .topbar .btn{display:none}
  .sn .toggle{border:3px solid var(--border);background:var(--surface);border-radius:8px;padding:8px;cursor:pointer;box-shadow:var(--shadow)}
  @media(min-width:900px){.sn{grid-template-columns:248px 1fr}.sn .side{display:flex}.sn .toggle{display:none}.sn .topbar .btn{display:inline-flex}}
  .sn .scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
  .sn.open .side{display:flex;position:fixed;top:0;left:0;width:248px;z-index:50}
  .sn.open .scrim{display:block}</style>
</head>
<body class="nb">
  <a class="skip" href="#main">Skip to content</a>

  <div class="sn" data-sn>
    <aside class="side" aria-label="Sidebar">
      <div class="brand"><span class="mark" aria-hidden="true"></span> Console</div>
      <div class="grp">Workspace</div>
      <a href="#" aria-current="true"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M3 3v18h18M7 14l3-4 4 3 5-7'/></svg> Dashboard</a>
      <a href="#"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-6 8-6s8 2 8 6'/></svg> Customers</a>
      <a href="#"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M3 3h7v7H3zM14 3h7v7H3zM3 14h7v7H3zM14 14h7v7H3z'/></svg> Projects</a>
      <div class="grp">Account</div>
      <a href="#"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x='4' y='11' width='16' height='9' rx='2'/><path d='M8 11V7a4 4 0 018 0v4'/></svg> Security</a>
      <a href="#"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg> Billing</a>
      <a href="#"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg> Notifications</a>
      <div class="foot">v2.4.1</div>
    </aside>
    <div class="scrim" data-scrim></div>
    <main class="main">
      <div class="topbar">
        <button class="toggle" type="button" aria-label="Toggle sidebar" data-toggle><i style="display:block;width:22px;height:2px;background:var(--foreground)"></i></button>
        <h1 style="font-size:1.4rem">Dashboard</h1>
        <span style="margin-left:auto"></span>
        <a class="btn" href="#">+ New</a>
      </div>
      <div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))">
        <div class="card"><b>1,204</b><p class="muted">Users</p></div>
        <div class="card"><b>$48k</b><p class="muted">MRR</p></div>
        <div class="card"><b>1.4%</b><p class="muted">Churn</p></div>
      </div>
    </main>
  </div>
  <script>
  (function(){
    var sn=document.querySelector('[data-sn]');if(!sn)return;
    var t=sn.querySelector('[data-toggle]'),s=sn.querySelector('[data-scrim]');
    t.addEventListener('click',function(){sn.classList.toggle('open')});
    s.addEventListener('click',function(){sn.classList.remove('open')});
  })();</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Sidebar Navigation

App sidebar + content area, collapsible on mobile.

**Technology:** Vanilla HTML/CSS/JS  
**Category:** sections / navigation  
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)  
**Responsive:** Mobile-first (320px → 1920px)  
**Dark mode:** via `prefers-color-scheme`  

**Tags:** nav, sidebar, dashboard  
**Features:** responsive collapse, aria-current, scrim

## Usage

1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand.