CSS Vertical Navbar

एक vertical navbar top के आर-पार चलने के बजाय page के side पर नीचे चलता है, वह layout जो आप ज़्यादातर dashboards और admin panels में देखते हैं जहाँ sidebar अपनी जगह बना रहता है जबकि main content उसके बगल में scroll होता है।

In this page:

List Items को Vertically Stack करना
Fixed बनाम Static Sidebar Positioning
Active Link Highlighting
Labels के साथ Icons
Collapsible Sidebar Pattern

Syntax

css

ul {
  list-style-type: none;
  width: length;
}
li a {
  display: block;
}

List Items को Vertically Stack करना

एक vertical navbar horizontal वाले जैसी ही semantic ul/li structure से शुरू होता है, लेकिन li elements की default block display को override करने के बजाय, आप बस इसे छोड़ देते हैं। Block-level list items automatically top से bottom तक stack होते हैं, जो exactly वह vertical layout है जो आप चाहते हैं।

उदाहरण: Stacking List Items Vertically

css

<style>
nav ul {
  list-style: none;
}
</style>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

Fixed बनाम Static Sidebar Positioning

एक static sidebar बाकी page के साथ scroll होकर चला जाता है, जबकि position: fixed इसे viewport पर pin कर देता है ताकि user के main content scroll करने पर भी यह visible रहे। Fixed sidebars को उनकी width main content के margin में account में लेनी पड़ती है, वरना content उनके नीचे render होगा।

उदाहरण: Fixed vs Static Sidebar Positioning

css

<style>
.sidebar {
  position: fixed;
  width: 200px;
  background: steelblue;
  color: white;
  padding: 10px;
}
.content {
  margin-left: 220px;
  background: #eee;
  padding: 10px;
}
</style>
<nav class="sidebar">Sidebar</nav>
<main class="content">Content is not covered by the fixed sidebar</main>

Active Link Highlighting

किसी vertical nav में current page को mark करने का आमतौर पर मतलब है server-side या JavaScript के ज़रिए एक "active" class जोड़ना, फिर उस class को एक background color, left border accent, या bold text से style करना ताकि user को हमेशा पता रहे कि वह app में कहाँ है।

उदाहरण: Active Link Highlighting

css

<style>
a.active {
  background: #333;
  color: white;
  border-left: 4px solid blue;
}
</style>
<a href="#" class="active">Dashboard</a>
<a href="#">Settings</a>

Labels के साथ Icons

Sidebar navigation आमतौर पर हर text label के साथ एक छोटा icon जोड़ता है। हर link पर display: flex को align-items: center के साथ इस्तेमाल करना icon और text को उसके size चाहे जो भी हो साथ में vertically centered रखता है, और gap उनके बीच consistent spacing जोड़ता है।

उदाहरण: Icons Alongside Labels

css

<style>
a {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
<a href="#"><span>🏠</span> Home</a>

Collapsible Sidebar Pattern

एक common enhancement एक ऐसा sidebar है जो सिकुड़कर एक narrow icon-only strip बन सकता है और वापस पूरी width पर expand हो सकता है। यह एक class toggle करके किया जाता है जो sidebar की width बदलती है, एक instant jump के बजाय एक smooth animated collapse के लिए width property को transition करते हुए।

उदाहरण: Collapsible Sidebar Pattern

css

<style>
.sidebar {
  width: 200px;
  background: steelblue;
  color: white;
  padding: 10px;
  transition: width 0.3s;
}
.sidebar.collapsed {
  width: 60px;
}
</style>
<nav class="sidebar collapsed">Collapsed narrow, animates back to 200px</nav>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Navigation Bar Next Lesson → CSS Horizontal Navbar