Navbar

Top navigation bar with dark theme for branding, links, and user controls.

Basic Navbar

Default navigation bar with brand and navigation links.

HTML 
<nav class="focus-navbar">
  <div class="focus-navbar-left">
    <div class="focus-navbar-brand">My App</div>
    <a href="#" class="focus-nav-link">Dashboard</a>
    <a href="#" class="focus-nav-link">Projects</a>
    <a href="#" class="focus-nav-link">Team</a>
  </div>
  <div class="focus-navbar-right">
    <a href="#" class="focus-nav-link"><i class="fa fa-bell"></i></a>
    <a href="#" class="focus-nav-link"><i class="fa fa-user"></i></a>
  </div>
</nav>

Add a logo image to your brand using .focus-navbar-logo.

HTML 
<nav class="focus-navbar">
  <div class="focus-navbar-left">
    <div class="focus-navbar-brand">
      <img src="logo.png" alt="Logo" class="focus-navbar-logo">
      <span>Focus UI</span>
    </div>
    <a href="#" class="focus-nav-link focus-nav-link-active">Home</a>
    <a href="#" class="focus-nav-link">Features</a>
    <a href="#" class="focus-nav-link">Pricing</a>
  </div>
  <div class="focus-navbar-right">
    <a href="#" class="focus-nav-link">Login</a>
    <button class="focus-btn focus-btn-sm focus-btn-primary">Sign Up</button>
  </div>
</nav>

Enhance navigation links with icons for better visual hierarchy.

HTML 
<nav class="focus-navbar">
  <div class="focus-navbar-left">
    <div class="focus-navbar-brand">
      <i class="fa fa-chart-line"></i> Analytics
    </div>
    <a href="#" class="focus-nav-link focus-nav-link-active">
      <i class="fa fa-home"></i> Dashboard
    </a>
    <a href="#" class="focus-nav-link">
      <i class="fa fa-chart-bar"></i> Reports
    </a>
  </div>
  <div class="focus-navbar-right">
    <a href="#" class="focus-nav-link">
      <i class="fa fa-bell"></i>
      <span class="focus-badge focus-badge-danger focus-badge-pill">3</span>
    </a>
    <a href="#" class="focus-nav-link">
      <i class="fa fa-user-circle"></i> Profile
    </a>
  </div>
</nav>

Combine navbar with dropdown menus for complex navigation.

HTML 
<nav class="focus-navbar">
  <div class="focus-navbar-left">
    <div class="focus-navbar-brand">Portal</div>
    <a href="#" class="focus-nav-link">Home</a>
    
    <div class="focus-dropdown">
      <button class="focus-nav-link focus-dropdown-toggle">
        Products <i class="fa fa-chevron-down"></i>
      </button>
      <div class="focus-dropdown-menu">
        <button class="focus-dropdown-item">Software</button>
        <button class="focus-dropdown-item">Mobile Apps</button>
      </div>
    </div>
  </div>
  
  <div class="focus-navbar-right">
    <div class="focus-dropdown">
      <button class="focus-nav-link focus-dropdown-toggle">
        Account <i class="fa fa-chevron-down"></i>
      </button>
      <div class="focus-dropdown-menu focus-dropdown-menu-right">
        <button class="focus-dropdown-item">Profile</button>
        <button class="focus-dropdown-item">Settings</button>
        <button class="focus-dropdown-item">Logout</button>
      </div>
    </div>
  </div>
</nav>

Different navbar layouts for various use cases.

Centered Brand:

Simple Layout:

HTML 
<!-- Centered Brand -->
<nav class="focus-navbar" style="position: relative;">
  <div class="focus-navbar-left">
    <a href="#" class="focus-nav-link">Features</a>
    <a href="#" class="focus-nav-link">Pricing</a>
  </div>
  <div class="focus-navbar-brand" style="position: absolute; left: 50%; transform: translateX(-50%); z-index: 10;">
    Centered Brand
  </div>
  <div class="focus-navbar-right">
    <a href="#" class="focus-nav-link">About</a>
    <a href="#" class="focus-nav-link">Contact</a>
  </div>
</nav>

<!-- Simple Layout -->
<nav class="focus-navbar">
  <div class="focus-navbar-brand">Simple App</div>
  <div class="focus-navbar-right">
    <a href="#" class="focus-nav-link">Documentation</a>
  </div>
</nav>

Add an expandable searchbar to your navbar. Toggles between an icon button and a full search form.

HTML 
<nav class="focus-navbar">
  <div class="focus-navbar-left">
    <div class="focus-navbar-brand">Brand</div>
    <a href="#" class="focus-nav-link">Home</a>
  </div>
  <div class="focus-navbar-right">
    <div class="focus-searchbar" id="searchbar">
      <button class="focus-searchbar-toggle" type="button">
        <i class="fa fa-search"></i>
      </button>
      <form class="focus-searchbar-form">
        <input type="search" class="focus-searchbar-input" placeholder="Search...">
        <button type="submit" class="focus-searchbar-submit">
          <i class="fa fa-search"></i>
        </button>
        <button type="button" class="focus-searchbar-close">
          <i class="fa fa-times"></i>
        </button>
      </form>
    </div>
    <a href="#" class="focus-nav-link"><i class="fa fa-user"></i></a>
  </div>
</nav>

The searchbar requires minimal JavaScript to toggle between collapsed and expanded states:

JavaScript 
// Initialize all searchbars
document.querySelectorAll('.focus-searchbar').forEach(searchbar => {
  const toggleBtn = searchbar.querySelector('.focus-searchbar-toggle');
  const closeBtn = searchbar.querySelector('.focus-searchbar-close');
  const input = searchbar.querySelector('.focus-searchbar-input');

  // Open searchbar
  toggleBtn.addEventListener('click', () => {
    searchbar.classList.add('focus-searchbar-active');
    input.focus();
  });

  // Close searchbar
  closeBtn.addEventListener('click', () => {
    searchbar.classList.remove('focus-searchbar-active');
    input.value = '';
  });

  // Handle form submit
  searchbar.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('Search query:', input.value);
    // Add your search logic here
  });
});

Focus UI provides several color variants for the navbar component.

Primary (Default):

Secondary:

Dark:

Light:

HTML 
<!-- Primary (default) -->
<nav class="focus-navbar">...</nav>

<!-- Secondary -->
<nav class="focus-navbar focus-navbar-secondary">...</nav>

<!-- Dark -->
<nav class="focus-navbar focus-navbar-dark">...</nav>

<!-- Light -->
<nav class="focus-navbar focus-navbar-light">...</nav>

Make the navbar stick to the top of the viewport when scrolling using .focus-navbar-sticky.

Scroll down to see the sticky effect

This navbar will stick to the top of this scrollable container as you scroll.

Content area

HTML 
<nav class="focus-navbar focus-navbar-sticky">
  <div class="focus-navbar-left">
    <div class="focus-navbar-brand">Sticky Navbar</div>
    <a href="#" class="focus-nav-link">Home</a>
    <a href="#" class="focus-nav-link">Features</a>
  </div>
  <div class="focus-navbar-right">
    <a href="#" class="focus-nav-link"><i class="fa fa-user"></i></a>
  </div>
</nav>

Fixed Navbar

Make the navbar fixed to the top of the viewport using .focus-navbar-fixed. Unlike sticky, it stays fixed even when not scrolling.

Fixed positioning

This navbar uses fixed positioning and stays at the top regardless of scroll position.

Content area

HTML 
<nav class="focus-navbar focus-navbar-fixed">
  <div class="focus-navbar-left">
    <div class="focus-navbar-brand">Fixed Navbar</div>
    <a href="#" class="focus-nav-link">Home</a>
    <a href="#" class="focus-nav-link">Features</a>
  </div>
  <div class="focus-navbar-right">
    <a href="#" class="focus-nav-link"><i class="fa fa-user"></i></a>
  </div>
</nav>

Control navbar width with container classes or full-width layout.

Full Width (100%):

Small Container (70%):

Medium Container (80%):

Container (90%):

Large Container (95%):

HTML 
<!-- Full Width (100%) -->
<nav class="focus-navbar focus-navbar-fullwidth">...</nav>

<!-- Container (90%) -->
<nav class="focus-navbar focus-navbar-container">...</nav>

<!-- Small Container (70%) -->
<nav class="focus-navbar focus-navbar-container-sm">...</nav>

<!-- Medium Container (80%) -->
<nav class="focus-navbar focus-navbar-container-md">...</nav>

<!-- Large Container (95%) -->
<nav class="focus-navbar focus-navbar-container-lg">...</nav>

Adjust navbar height with size modifier classes.

Extra Small Height (32px):

Small Height (36px):

Default Height (40px):

Large Height (56px):

HTML 
<!-- Extra Small Height -->
<nav class="focus-navbar focus-navbar-xs">...</nav>

<!-- Small Height -->
<nav class="focus-navbar focus-navbar-sm">...</nav>

<!-- Default Height -->
<nav class="focus-navbar">...</nav>

<!-- Large Height -->
<nav class="focus-navbar focus-navbar-lg">...</nav>

Custom Width and Height with CSS Variables

Use CSS variables --focus-navbar-width and --focus-navbar-height to customize navbar dimensions.

Custom Width (75%):

Custom Height (48px):

Both Custom (85% width, 44px height):

HTML 
<!-- Custom Width -->
<nav class="focus-navbar focus-navbar-container" style="--focus-navbar-width: 75%;">
  ...
</nav>

<!-- Custom Height -->
<nav class="focus-navbar" style="--focus-navbar-height: 48px;">
  ...
</nav>

<!-- Custom Both -->
<nav class="focus-navbar focus-navbar-container" style="--focus-navbar-width: 85%; --focus-navbar-height: 44px;">
  ...
</nav>

CSS Classes Reference

Class Description
.focus-navbar Main navbar container
.focus-navbar-left Left section of navbar
.focus-navbar-right Right section of navbar
.focus-navbar-brand Brand/logo element
.focus-navbar-logo Logo image styling
.focus-nav-link Navigation link
.focus-nav-link-active Active link state
.focus-navbar-primary Primary color variant (default)
.focus-navbar-secondary Secondary color variant
.focus-navbar-dark Dark color variant
.focus-navbar-light Light color variant
.focus-searchbar Main searchbar container (navbar feature)
.focus-searchbar-toggle Button that shows search icon (collapsed state)
.focus-searchbar-form Form container that appears when expanded
.focus-searchbar-input Search input field
.focus-searchbar-submit Submit button within search form
.focus-searchbar-close Close button to collapse searchbar
.focus-searchbar.active State class that shows expanded form
.focus-navbar-sticky Makes navbar stick to top when scrolling
.focus-navbar-fixed Makes navbar fixed to top of viewport
.focus-navbar-fullwidth Edge-to-edge full-width navbar
.focus-navbar-container Centered navbar with 90% width
.focus-navbar-container-sm Centered navbar with 70% width
.focus-navbar-container-md Centered navbar with 80% width
.focus-navbar-container-lg Centered navbar with 95% width
.focus-navbar-xs Extra small height navbar (32px min-height)
.focus-navbar-sm Small height navbar (36px min-height)
.focus-navbar-lg Large height navbar (56px min-height)