Edge Weighted Navigation Bar

An edge weighted navigation bar built with pure HTML and CSS that visually emphasizes elements positioned near layout boundaries. It enhances structural balance and directional focus through edge aligned styling techniques.

Usage

Use this component when interfaces require edge prioritized navigation emphasis, such as application headers, dashboard toolbars, or structured layouts where alignment plays a key visual role.

Implementation

The layout uses flex or grid based alignment strategies to weight elements toward container edges, while CSS controls spacing, visual contrast, and responsive stacking behavior across devices.

HTML

<nav class="nav-edge">
  <a class="is-active">Dashboard</a>
  <a>Usage</a>
  <a>Settings</a>
</nav>

<nav class="nav-edge">
  <a class="is-active">Dashboard</a>
  <a>Usage</a>
  <a>Settings</a>
</nav>

CSS

.nav-edge {
  width: 200px;
  padding: 0.5rem 0.6rem;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
  display: flex;
  justify-content: space-between;
}

.nav-edge a {
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  transition: color 150ms ease, transform 150ms ease;
}

.nav-edge a:hover {
  transform: translateY(-1px);
  color: #374151;
}

.nav-edge a.is-active {
  color: #111827;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .nav-edge {
    background: #020617;
  }

  .nav-edge a {
    color: #9ca3af;
  }

  .nav-edge a.is-active {
    color: #e5e7eb;
  }
}

.nav-edge {
  width: 200px;
  padding: 0.5rem 0.6rem;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
  display: flex;
  justify-content: space-between;
}

.nav-edge a {
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  transition: color 150ms ease, transform 150ms ease;
}

.nav-edge a:hover {
  transform: translateY(-1px);
  color: #374151;
}

.nav-edge a.is-active {
  color: #111827;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .nav-edge {
    background: #020617;
  }

  .nav-edge a {
    color: #9ca3af;
  }

  .nav-edge a.is-active {
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Emphasizes edge aligned navigation elements
• Enhances layout symmetry and focus
• Fully responsive across breakpoints
• Suitable for dashboards and application headers
• Easy to customize spacing and alignment rules

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.