NavBar

Navigation Bar

The navbar is designed to reflect a minimalist and balanced layout that aligns with the overall calm, structured tone of the design system. Its clear visual hierarchy and deliberate spacing support intuitive navigation while maintaining a clean and unobtrusive presence across screen sizes.

Rahul Singh

Home Work About

HTML


<!-- Desktop NavBar -->
  <nav class="desktop-default">
  <div class="nav-internal-frame">

  <!-- Logo Section -->
  <div class="logo-nav">
    <img src="../Assets/Logo/Logo Color White Background.png" alt="Logo">
    <h6>Rahul Singh</h6>
  </div>

  <!-- Navigation Links -->
  <div class="nav-items">
    <a href="#" class="text-decoration-none fw-semibold">Home</a>
    <a href="#" class="text-decoration-none fw-semibold">Work</a>
    <a href="#" class="text-decoration-none fw-semibold">About</a>
  </div>

  <!-- Resume Button -->
  <div>
    <button class="btn btn-outline-primary">RESUME</button>
  </div>

</div>
</nav>

<!-- Mobile NavBar -->
<div class="mobile-expanded">

<!-- Top Collapsed Nav Bar -->
<div class="mobile-collapsed-bar">
  <div class="mobile-logo-wrapper">
    <img src="../Assets/Logo/Logo Color White Background.png" alt="Logo">
    <h6><a href="#">Rahul Singh</a></h6>
  </div>
  <div class="bx-menu-logo">
    <i class='bx bx-menu fs-3'></i>
  </div>
</div>

<!-- Drawer with nav links -->
<div class="mobile-nav-drawer">
  <div class="mobile-nav-links">
    <a href="#" class="mobile-nav-item active">Home</a>
    <a href="#" class="mobile-nav-item">Work</a>
    <a href="#" class="mobile-nav-item">About</a>
  </div>
  <button class="btn btn-outline-primary mt-3">RESUME</button>
</div>

</div>

CSS


/* Desktop Navigation */

.desktop-default {
  display: flex;
  height: 64px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #AFBCCC;
  background: var(--surface-light);
}

.nav-internal-frame {
  display: flex;
  max-width: 1040px;
  padding: 0 16px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: 100%;
}

/* Logo Section */
.logo-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.logo-nav img {
  width: 48px;
  height: 48px;
}

.logo-nav h6 {
  margin: 0;
}

/* Nav Items Section */
.nav-items {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-items a {
  text-decoration: none;
  font-family: var(--font-label);
  font-size: var(--label-default-font-size);
  font-weight: 500;
  color: var(--text-body-default);
}

.nav-items a:hover {
  color: var(--primary, #0d6efd);
}

/* End of Desktop Default Navigation Bar */


/* Mobile Navigation Bar */

.mobile-expanded {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.mobile-expanded a {
  text-decoration: none;
  color: var(--text-body-default);
}

.mobile-expanded a:hover {
  text-decoration: none;
  color: var(--text-primary);
}

/* Top Bar */
.mobile-collapsed-bar {
  display: flex;
  width: 100%;
  height: 64px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-default-light);
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.mobile-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 0 0;
}

.mobile-logo-wrapper h6 {
  margin: 0;
}

.mobile-logo-wrapper img {
  width: 48px;
  height: 48px;
}

/* Drawer */
.mobile-nav-drawer {
  display: flex;
  align-items: center;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 0;
  background-color: var(--surface-light);
  border-bottom: 1px solid var(--border-default-light);
}

.mobile-nav-drawer.active {
  max-height: 500px;
  padding-bottom: 32px;
}

/* Navigation Links Group */
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}

/* Single Link Item */
.mobile-nav-item {
  display: flex;
  height: 48px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  width: 100%;
  border-bottom: 1px solid var(--border-default-light);
  font-weight: 600;
  padding: 0 16px;
  font-family: var(--font-label);
  font-size: var(--label-default-font-size);
  font-weight: 500;
  color: var(--text-body-default);
}

a.mobile-nav-item:hover {
  background-color: var(--surface-primary);
}

a.mobile-nav-item.active {
  background-color: var(--surface-primary);
}

.bx-menu-logo:hover {
  color: var(--icon-primary);
  cursor: pointer;
}

/* End of Mobile Navigation Bar */

Accessibility

The navbar is designed to support quick orientation and ease of access. A high-contrast, unobtrusive white background paired with bold, legible typography ensures strong readability across visual conditions. Key actions—like the primary call-to-action button—are embedded directly within the navigation bar to reduce effort and eliminate the need for scrolling, supporting both discoverability and efficiency for all users.