Navbar

<bh-navbar> | BharatNavbar

The Navbar component provides a customizable navigation bar that responds to different screen sizes. It features branding options, flexible navigation item positioning, and various styling variants.

Open in

HomeProductsServicesContact

Basic Usage

Preview

Open in

HomeDocsAbout UsContact Us

HTML

<bh-navbar brandingText="BharatUI" brandingTextColor="white" variant="primary" borderRadius="5px">
  <bh-button variant="link" color="white" hover-color="gray" style="margin-top: -2px;">Home</bh-button>
  <bh-button variant="link" color="white" hover-color="gray" style="margin-top: -2px;">Docs</bh-button>
  <bh-button variant="link" color="white" hover-color="gray" style="margin-top: -2px;">About Us</bh-button>
  <bh-button variant="link" color="white" hover-color="gray" style="margin-top: -2px;">Contact Us</bh-button>
</bh-navbar>

React

import { BharatNavbar } from 'bharat-ui/react/components/navbar';
import { BharatButton } from 'bharat-ui/react/components/button';

function MyComponent() {
  return (
  <BharatNavbar brandingText="BharatUI" brandingTextColor="white" variant="primary" borderRadius="5px">
    <BharatButton variant="link" color="white" hover-color="gray">Home</BharatButton>
    <BharatButton variant="link" color="white" hover-color="gray">Docs</BharatButton>
    <BharatButton variant="link" color="white" hover-color="gray">About</BharatButton>
    <BharatButton variant="link" color="white" hover-color="gray">Contact Us</BharatButton>
  </BharatNavbar>
  );
}

Interactive Playground

Experiment with different properties of the navbar component.

Open in

HomeAboutContact

Basic Properties

Branding Text
Variant	PrimarySecondaryGradientRoundedTricolor
Height
Items Position	Right (Default)Left

Appearance Options

Border Radius
Text Color
Add Logo	No LogoGoogle LogoIndia Flag

Custom Background

Background

DefaultBlue GradientOrange GradientPurple GradientDarkLight (White)

Add Border

Items Position

Control the positioning of navigation items:

Preview

Open in

HomePricingDocs

HomePricingDocs

HTML

<bh-navbar brandingText="BharatUI" variant="rounded" itemsPosition="left" style="width:100%">
  <div style="margin-top:10px;"></div>
  <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Home</bh-button>
  <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Pricing</bh-button>
  <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Docs</bh-button>
</bh-navbar>

<bh-navbar brandingText="BharatUI" itemsPosition="right" variant="rounded" style="width:100%">
  <div style="margin-top:10px;"></div>
  <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Home</bh-button>
  <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Pricing</bh-button>
  <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Docs</bh-button>
</bh-navbar>

React

import { BharatNavbar } from 'bharat-ui/react/components/navbar';
import { BharatButton } from 'bharat-ui/react/components/button';

function ItemsPositionExamples() {
  return (
    <BharatNavbar brandingText="BharatUI" variant="rounded" itemsPosition="left" style="width:100%">
      <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Home</BharatButton>
      <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Pricing</BharatButton>
      <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Docs</BharatButton>
    </BharatNavbar>

    <BharatNavbar brandingText="BharatUI" itemsPosition="right" variant="rounded" style="width:100%">
      <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Home</BharatButton>
      <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Pricing</BharatButton>
      <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Docs</BharatButton>
    </BharatNavbar>
  );
}

Advanced Styling

Customize the appearance with backgrounds, shadows, borders, and more.

Preview

Open in

HomeProductsServicesHomeProductsServices

HTML

<!-- Gradient with Custom Styling -->
<bh-navbar
      brandingText="Teachyst"
      brandingTextColor="#f1f1f1"
      height="70px"
      background="linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #0f2027 100%)"
      borderRadius="8px"
      style="text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);">

      <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Home</bh-button>
      <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Products</bh-button>
      <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Products</bh-button>
    </bh-navbar>

    <bh-navbar
      brandingText="Learnyst"
      height="60px"
      background="#1e293b"
      brandingTextColor="#e2e8f0"
      border="2px solid #334155"
      borderRadius="4px">
      <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Home</bh-button>
      <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Products</bh-button>
      <bh-button variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Products</bh-button>
    </bh-navbar>

React

import { BharatNavbar } from 'bharat-ui/react/components/navbar';

function AdvancedStylingExamples() {
  return (
      <BharatNavbar
        brandingText="Teachyst"
        brandingTextColor="#f1f1f1"
        height="70px"
        background="linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #0f2027 100%)"
        borderRadius="8px"
        style="text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);">

        <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Home</BharatButton>
        <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Products</BharatButton>
        <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Products</BharatButton>
      </BharatNavbar>

      <BharatNavbar
        brandingText="Learnyst"
        height="60px"
        background="#1e293b"
        brandingTextColor="#e2e8f0"
        border="2px solid #334155"
        borderRadius="4px">
        <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Home</BharatButton>
        <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Products</BharatButton>
        <BharatButton variant="link" color="white" hover-color="#B5B5B5" style="margin-top:-2px;">Products</BharatButton>
      </BharatNavbar>
  );
}

Properties

Property	Type	Description
brandingText	string	Text to display as brand name
brandingTextColor	string	Color of the branding text
brandingLogo	string	URL of the branding logo
itemsPosition	string	Position of navigation items: "left" or "right"
padding	string	Custom padding for the navbar
variant	string	Visual style: "primary", "secondary", "gradient", "rounded", "tricolor"
width	string	Custom width
height	string	Custom height
background	string	Custom background color or gradient
borderRadius	string	Custom border radius
border	string	CSS border property
borderImage	string	CSS border-image property
color	string	Text color