Scroll Condensed Navigation Strip

A scroll condensed navigation strip built with pure HTML and CSS that reduces visual height and spacing in compact states. It enhances space efficiency and focused navigation visibility within responsive layouts.

Usage

Use this component when interfaces require compact horizontal navigation presentation, such as dashboards, content heavy pages, or application headers where conserving vertical space improves usability.

Implementation

The condensed effect is achieved using CSS height control, spacing adjustments, and transition styling, allowing the navigation strip to maintain a slim structure. Responsive rules ensure consistent alignment across breakpoints.

HTML

<nav class="nav-condensed">
  <a>Overview</a>
  <a>Stats</a>
  <a>Account</a>
</nav>

<nav class="nav-condensed">
  <a>Overview</a>
  <a>Stats</a>
  <a>Account</a>
</nav>

CSS

.nav-condensed {
  width: 200px;
  padding: 0.6rem;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
  display: flex;
  justify-content: space-between;
  transition: padding 160ms ease;
}

.nav-condensed:hover {
  padding: 0.4rem;
}

.nav-condensed a {
  font-size: 12px;
  color: #374151;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .nav-condensed {
    background: linear-gradient(180deg, #111827, #020617);
  }

  .nav-condensed a {
    color: #e5e7eb;
  }
}

.nav-condensed {
  width: 200px;
  padding: 0.6rem;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
  display: flex;
  justify-content: space-between;
  transition: padding 160ms ease;
}

.nav-condensed:hover {
  padding: 0.4rem;
}

.nav-condensed a {
  font-size: 12px;
  color: #374151;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .nav-condensed {
    background: linear-gradient(180deg, #111827, #020617);
  }

  .nav-condensed a {
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Designed for compact navigation height
• Enhances vertical space optimization
• Fully responsive across breakpoints
• Suitable for dashboards and application layouts
• Easy to customize spacing and transition timing

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.