Blocks - Navbar

Copy any custom block snippet below and paste it on your page to build your website easily.

Filter Blocks:

Disable dropdown hover by adding .hover-none className to .navbar on JSX.

Disable carets on dropdown parents by adding .caret-none className to .navbar on JSX.

Use this guide to add a link to dropdown parent.

Center Nav - Transparent Background

Check out some of the live examples: Demo 1 or Demo 4.

View example's code

import Navbar  from 'components/blocks/navbar/navbar-1';
import NextLink from 'components/reuseable/links/NextLink';

<Navbar language button={<NextLink title="Contact" href="#" className="btn btn-sm btn-primary rounded" />} />

Center Nav - Transparent Background - Light Text

Check out some of the live examples: Demo 3 or Demo 15.

View example's code

import Navbar  from 'components/blocks/navbar/navbar-1';
import NextLink from 'components/reuseable/links/NextLink';

<Navbar
  language
  logoAlt="logo-light"
  navClassName="navbar navbar-expand-lg center-nav transparent navbar-dark"
  button={<NextLink title="Contact" href="#" className="btn btn-sm btn-primary rounded" />}
/>

Center Nav - Light Background

Check out some of the live examples: Shop or Product Page.

View example's code

import Navbar  from 'components/blocks/navbar/navbar-1';
import NextLink from 'components/reuseable/links/NextLink';

<Navbar
  language
  navClassName="navbar navbar-expand-lg center-nav navbar-light navbar-bg-light"
  button={<NextLink title="Contact" href="#" className="btn btn-sm btn-primary rounded" />}
/>

Center Nav - Dark Background

View example's code

import Navbar  from 'components/blocks/navbar/navbar-1';
import NextLink from 'components/reuseable/links/NextLink';

<Navbar
  language
  logoAlt="logo-light"
  navClassName="navbar navbar-expand-lg center-nav navbar-dark navbar-bg-dark"
  button={<NextLink title="Contact" href="#" className="btn btn-sm btn-primary rounded" />}
/>

Center Nav - Fancy

Check out some of the live examples: Demo 7.

View example's code

import Navbar  from 'components/blocks/navbar/navbar-1';
import NextLink from 'components/reuseable/links/NextLink';

<Navbar
  fancy
  language
  logoAlt="logo-purple"
  navClassName="navbar navbar-expand-lg fancy navbar-light navbar-bg-light caret-none"
  button={<NextLink title="Contact" href="#" className="btn btn-sm btn-primary rounded" />}
/>

Classic - Transparent Background

Check out some of the live examples: Demo 6 or Demo 8.

View example's code

import Navbar  from 'components/blocks/navbar/navbar-1';
import NextLink from 'components/reuseable/links/NextLink';

<Navbar
  info
  navOtherClass="navbar-other ms-lg-4"
  navClassName="navbar navbar-expand-lg classic transparent navbar-light"
  button={
    <a href="#" data-bs-toggle="modal" data-bs-target="#modal-signin" className="btn btn-sm btn-primary rounded-pill">
      Sign In
    </a>
  }
/>

Classic - Transparent Background - Light Text

Check out some of the live examples: Demo 11.

View example's code

import Navbar  from 'components/blocks/navbar/navbar-1';
import NextLink from 'components/reuseable/links/NextLink';

<Navbar
  info
  logoAlt="logo-light"
  navOtherClass="navbar-other ms-lg-4"
  navClassName="navbar navbar-expand-lg classic transparent navbar-dark"
  button={
    <a href="#" data-bs-toggle="modal" data-bs-target="#modal-signin" className="btn btn-sm btn-white rounded-pill">
      Sign In
    </a>
  }
/>

Classic - Light Background

View example's code

import Navbar  from 'components/blocks/navbar/navbar-1';
import NextLink from 'components/reuseable/links/NextLink';

<Navbar
  info
  navOtherClass="navbar-other ms-lg-4"
  navClassName="navbar navbar-expand-lg classic navbar-light navbar-bg-light"
  button={
    <a href="#" data-bs-toggle="modal" data-bs-target="#modal-signin" className="btn btn-sm btn-primary rounded-pill">
      Sign In
    </a>
  }
/>

Classic - Dark Background

View example's code

import Navbar  from 'components/blocks/navbar/navbar-1';
import NextLink from 'components/reuseable/links/NextLink';

<Navbar
  info
  logoAlt="logo-light"
  navOtherClass="navbar-other ms-lg-4"
  navClassName="navbar navbar-expand-lg classic navbar-dark navbar-bg-dark"
  button={
    <a href="#" data-bs-toggle="modal" data-bs-target="#modal-signin" className="btn btn-sm btn-primary rounded-pill">
      Sign In
    </a>
  }
/>

Classic - Fancy

View example's code

import Navbar  from 'components/blocks/navbar/navbar-1';
import NextLink from 'components/reuseable/links/NextLink';

<Navbar
  info
  fancy
  navOtherClass="navbar-other ms-lg-4"
  navClassName="navbar navbar-expand-lg fancy navbar-light navbar-bg-light"
  button={
    <a href="#" data-bs-toggle="modal" data-bs-target="#modal-signin" className="btn btn-sm btn-primary rounded-pill">
      Sign In
    </a>
  }
/>

Center Logo - Transparent Background

View example's code

import Navbar  from 'components/blocks/navbar/navbar-3';

<Navbar logoAlt="logo-purple" navClassName="navbar navbar-expand-lg center-logo transparent navbar-light" />

Center Logo - Transparent Background - Light Text

Check out some of the live examples: Demo 13.

View example's code

import Navbar  from 'components/blocks/navbar/navbar-3';

<Navbar logoAlt="logo-light" navClassName="navbar navbar-expand-lg center-logo transparent navbar-dark" />

Center Logo - Light Background

View example's code

import Navbar  from 'components/blocks/navbar/navbar-3';

<Navbar logoAlt="logo-dark" navClassName="navbar navbar-expand-lg center-logo navbar-light navbar-bg-light" />

Center Logo - Dark Background

View example's code

import Navbar  from 'components/blocks/navbar/navbar-3';

<Navbar logoAlt="logo-light" navClassName="navbar navbar-expand-lg center-logo navbar-dark navbar-bg-dark" />

Extended

Check out some of the live examples: Demo 12.

View example's code

import Navbar  from 'components/blocks/navbar/navbar-2';

<Navbar />

Extended - Alternative

Check out some of the live examples: Demo 24.

View example's code

import Navbar  from 'components/blocks/navbar/navbar-4';

<Navbar />

PROJECT PAGES

SINGLE PROJECTS

Usage

Styleguide

Elements

Blocks - Navbar

Filter Blocks:

Center Nav - Transparent Background

Center Nav - Transparent Background - Light Text

Center Nav - Light Background

Center Nav - Dark Background

Center Nav - Fancy

Classic - Transparent Background

Classic - Transparent Background - Light Text

Classic - Light Background

Classic - Dark Background

Classic - Fancy

Center Logo - Transparent Background

Center Logo - Transparent Background - Light Text

Center Logo - Light Background

Center Logo - Dark Background

Extended

Extended - Alternative

Think unique and be creative. Make a difference with Sandbox.