Blocks - Navbar

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

Filter Blocks:

Note that since we show multiple navbar examples on docs, offcanvas navigation, offcanvas info and modals are disabled on the examples, but their codes are intact and will work properly on the template.

Disable dropdown hover by adding .hover-none class to .navbar on Include classList.

Disable carets on dropdown parents by adding .caret-none class to .navbar on Include classList.

Center Nav - Transparent Background

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

We are a digital agency specializing in UX/UI design, web development and marketing.

View example's Include code

{% include components/navbar/navbar.html 
  classList="navbar-light navbar-light"
  logoAlt=true
  otherClassList="w-100 d-flex ms-auto"
  otherLanguageSelect=true
  otherInfo=true
%}

Center Nav - Transparent Background - Light Text

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

View example's Include code


{% include components/navbar/navbar.html 
  wrapperClass="bg-dark"
  classList="center-nav transparent navbar-dark"
  logoBoth=true
  logoAlt="logo-dark"
  otherClassList="w-100 d-flex ms-auto"
  otherSearch=true
  otherBtn=true
  otherBtnClassList="btn btn-sm btn-primary rounded"
  otherBtnText="Contact"
  otherBtnLink="/contact/"
%}

Center Nav - Light Background

Check out some of the live examples: Demo4.

View example's Include code


{% include components/navbar/navbar.html 
  wrapperClass=""
  classList="center-nav transparent navbar-light navbar-bg-light"
  centerNav=true
  logoAlt=true
  otherClassList="w-100 d-flex ms-auto"
  otherSocial=true
%}

Center Nav - Dark Background

View example's Include code

{% include components/navbar/navbar.html 
  wrapperClass=""
  classList="center-nav navbar-dark navbar-bg-dark"
  centerNav=true
  logoLight=true
  otherClassList="w-100 d-flex ms-auto"
  otherLanguageSelect=true
  otherBtn=true
  otherBtnClassList="btn btn-sm btn-primary rounded-pill"
  otherBtnText="Contact"
  otherBtnLink="/contact/"
%}

Center Nav - Fancy

Check out some of the live examples: Demo 7.

View example's Include code


{% include components/navbar/navbar-fancy.html 
  wrapperClass=""
  classList="fancy navbar-light navbar-bg-light caret-none"
  centerNav=true
  fancy=true
  logoAlt=true
  otherClassList="w-100 d-flex ms-auto"
  otherSocial=true
%}

Classic - Transparent Background

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

Update New version of our product is finally here!!

View example's Include code


  {% include components/navbar/navbar.html 
    topAlert=true
    wrapperClass="bg-soft-primary"
    classList="classic transparent navbar-light"
    logoAlt="logo-dark"
    otherClassList="ms-lg-4"
    otherBtn=true
    otherBtnClassList="btn btn-sm btn-primary rounded"
    otherBtnText="Free Trial"
    otherBtnLink="#"
%}

Classic - Transparent Background - Light Text

Check out some of the live examples: Demo 11.

View example's Include code


{% include components/navbar/navbar.html 
  topAlert=false
  wrapperClass="bg-soft-primary"
  classList="classic transparent navbar-dark"
  logoBoth=true
  logoAlt="logo-dark"
  otherClassList="ms-lg-4"
  otherBtn=true
  otherBtnClassList="btn btn-sm btn-white rounded-pill"
  otherBtnText="Free Trial"
  otherBtnLink="#"
  
%}

Classic - Light Background

View example's Include code


{% include components/navbar/navbar.html 
  topAlert=false
  wrapperClass="bg-soft-primary"
  classList="classic navbar-light navbar-bg-light"
  logoAlt="logo-dark"
  otherClassList="ms-lg-4"
  otherBtn=true
  otherBtnClassList="btn btn-sm btn-primary rounded-pill"
  otherBtnText="Free Trial"
  otherBtnLink="#"
  
%}

Classic - Dark Background

View example's Include code


  {% include components/navbar/navbar.html 
    topAlert=false
    classList="classic navbar-dark navbar-bg-dark"
    logoBoth=true
    logoAlt="logo-dark"
    otherClassList="ms-lg-4"
    otherBtn=true
    otherBtnClassList="btn btn-sm btn-primary rounded-pill"
    otherBtnText="Free Trial"
    otherBtnLink="#"
    
%}

Classic - Fancy

View example's Include code


  {% include components/navbar/navbar-fancy.html 
    wrapperClass=""
    classList="fancy navbar-light navbar-bg-light"
    fancy=true
    logoAlt="logo-light"
    otherClassList=" d-flex ms-auto"
    otherBtn=true
    otherBtnClassList="btn btn-sm btn-primary rounded-pill"
    otherBtnText="Free Trial"
    otherBtnLink="#"
   
%}

Center Logo - Transparent Background

View example's Include code


  {% include components/navbar/navbar-center-logo.html 
    classList="center-logo  navbar-dark navbar-bg-dark"
    logoBoth=true
    logoAlt="logo-dark"
%}

Center Logo - Transparent Background - Light Text

Check out some of the live examples: Demo 13.

View example's Include code


  {% include components/navbar/navbar-center-logo.html 
    classList="center-logo transparent navbar-dark"
    fancy=false
    logoBoth=true
    logoLight=true
%}

Center Logo - Light Background

View example's Include code


  {% include components/navbar/navbar-center-logo.html 
    classList="center-logo navbar-light navbar-bg-light"
    fancy=false
    logoBoth=true
    logoAlt="logo-dark"
%}

Center Logo - Dark Background

View example's Include code


  {% include components/navbar/navbar-center-logo.html 
    classList="center-logo transparent navbar-dark"
    fancy=false
    logoBoth=true
    logoLight=true
%}

Center Logo - Fancy

View example's Include code


  {% include components/navbar/navbar-center-logo.html 
    classList="center-logo fancy navbar-light navbar-bg-light"
    fancy=true
    logoBoth=true
    logoAlt="logo-dark"
   %}

Extended

Check out some of the live examples: Demo 12.

View example's Include code


  {% include components/navbar/navbar-extended.html 
    otherLanguageSelect=true    
    %}

Extended - Alternative

Check out some of the live examples: Demo 24.

We are a digital agency specializing in UX/UI design, web development and marketing.

View example's Include code


      {% include components/navbar/navbar-extended-alt.html 
        classList="extended extended-alt navbar-light navbar-bg-light"
        onePageDemo=true
        logoAlt="logo-dark"
        otherSearch=true
        otherInfo=true
    %}

Blocks - Navbar

Filter Blocks:

Center Nav - Transparent Background

Sandbox

Contact Info

Opening Hours

Follow Us

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

Center Logo - Fancy

Extended

Extended - Alternative

Sandbox

Contact Info

Opening Hours

Follow Us

Project Pages

Single Projects

Usage

Styleguide

Elements

Blocks - Navbar

Filter Blocks:

Center Nav - Transparent Background

Project Pages

Single Projects

Usage

Styleguide

Elements

Center Nav - Transparent Background - Light Text

Project Pages

Single Projects

Usage

Styleguide

Elements

Center Nav - Light Background

Project Pages

Single Projects

Usage

Styleguide

Elements

Center Nav - Dark Background

Project Pages

Single Projects

Usage

Styleguide

Elements

Center Nav - Fancy

Project Pages

Single Projects

Usage

Styleguide

Elements

Classic - Transparent Background

Project Pages

Single Projects

Usage

Styleguide

Elements

Classic - Transparent Background - Light Text

Project Pages

Single Projects

Usage

Styleguide

Elements

Classic - Light Background

Project Pages

Single Projects

Usage

Styleguide

Elements

Classic - Dark Background

Project Pages

Single Projects

Usage

Styleguide

Elements

Classic - Fancy

Project Pages

Single Projects

Usage

Styleguide

Elements

Center Logo - Transparent Background

Project Pages

Single Projects

Center Logo - Transparent Background - Light Text

Project Pages

Single Projects

Center Logo - Light Background

Project Pages

Single Projects

Center Logo - Dark Background

Project Pages

Single Projects

Center Logo - Fancy