Navigation Light

  1. Home
  2. Horizontal Navigation
  3. Navigation Light

$5,668

Sales

Description

Light color horizontal navigation with custom light color options. In this page you can experience it. If you want to create a light color horizontal navigation use the following customization options.

Examples

Classic white

Custom light colors

Light amber

Teal without shadow

Light red

CSS Classes

This table contains all classes which can be used in light horizontal navigation. You can combine them as per horizontal navigation light template requirements.

All these options can be set via following classes:

Classes Description
.navbar-light To set horizontal navigation light color you need to add .navbar-light class in horizontal navigation <div> tag. Refer HTML markup line no 13.
.bg-[color]

To set the light horizontal navigation background color use .bg-[color] class where [color] is the value of your selected color from stack color palette. So for teal color background class will be .bg-teal. Refer HTML markup line no 2. Background color class is a optional if you don't it will take white background default.

.bg-lighten-[*]

To set the selected background color lighten use .bg-lighten-[*] class where [*] is the value between '1-5' of your selected lighten color from stack color palette. So for color lighten 4 background class will be .bg-lighten-4. Refer HTML markup line no 2. Background lighten color class is a optional if you don't it will take white background default.

.bg-lighten-[*] class will work only if you have used .bg-[color].
.border-[color]

To set the light horizontal navigation border color use .border-[color] class where [color] is the value of your selected color from stack color palette. So for teal color border class will be .bg-teal. Refer HTML markup line no 2. Border color class is a optional.

.border-lighten-[color]

To set the selected border color lighten use .border-lighten-[*] class where [*] is the value between '1-5' of your selected lighten color from stack color palette. So for color lighten 4 border class will be .border-lighten-4. Refer HTML markup line no 2. Border lighten color class is a optional.

.border-lighten-[*] class will work only if you have used .border-[color].

HTML Markup

This section contains HTML Markup to create light horizontal navigation. This markup define where to add css classes to make horizontal navigation light.

  • Line no 13: Contain the .navbar-light class for adjusting horizontal navigation color light. It has also .bg-teal & bg-lighten-5 to set lighten background color and border-teal & border-lighten-4 to set lighten border.
        
              <!DOCTYPE html>
              <html lang="en">
                <head></head>
                <body data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded">
                  <!-- START Navbar-->
                  <nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu fixed-bottom navbar-dark navbar-shadow navbar-border">
                      ...
                  </nav>
                  <!-- END Navbar-->
                  <!-- START  Horizontal navigation -->
                  <div role="navigation" data-menu="menu-wrapper" class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-light navbar-shadow border-grey border-lighten-2">
                      ...
                  </div>
                  <!-- END Horizontal navigation-->
                  <!-- BEGIN Content-->
                  <div class="content app-content">
                      <div class="content-wrapper">
                          <!-- content header-->
                          <div class="content-header row">
                              ...
                          </div>
                          <!-- content header-->
                          <!-- content right-->
                          <div class="content-right">
                              ...
                          </div>
                          <!-- content right-->
                      </div>
                  </div>
                  <!-- END Content-->
                  <!-- START FOOTER DARK-->
                  <footer class="footer footer-dark">
                      ...
                  </footer>
                  <!-- START FOOTER DARK-->
                </body>
              </html>

JADE Configuration

Stack Admin use JADE as template engine to generate pages and whole template quickly using node js, for getting start with JADE usage & template generating process please refer template documentation.

JADE Variables

This table contains required JADE variables to generate horizontal navigation layout.

Block Variable Datatype Value Description
horizontalMenuConfig menuColor string 'navbar-light' horizontalMenuConfig block has a menuColor variable, it contains horizontal navigation specific classes in that you need to add navbar-light. It also contain optional classes like bg-teal bg-lighten-5 border-teal border-lighten-4
JADE Code

To generate horizontal navigation light page or template, you need to use following JADE code.

  • Line no 20-21: Set horizontal navigation light class to menuColor variable value as 'navbar-light' in horizontalMenuConfig block, it contains horizontal navigation specific classes in that you need to add navbar-light. It also contain optional classes like bg-teal bg-lighten-5 border-teal border-lighten-4.
  • Line no 27-28: content block has content section html file included include ../contents/horizontal-light-navigation.html, which can be customizable on page level.

If you want to use this layout on page level you need to define it on page it self. This template has one example jade file for light horizontal navigation horizontal-light-navigatioin.jade, however you can use it on template level but it will generate whole template horizontal navigation light.

              
                block pageVars
                    - var pageTitle    = "Navigation Light"
                    - var pageSubTitle = "Horizontal light navigation"
                    - var description  = "The horizontal light navigation, light template usage & customization option."
                    - var activeMenu   = "horizontal-nav-light"
                extends template
                append horizontalMenuConfig
                    - var menuColor = "navbar-light"
                append breadcrumbs
                    +breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Horizontal Navigation"}, {name:"Navigation Light"}])
                //- Include page content in page block
                append content
                    include ../contents/horizontal-nav-light.html
                //- Vendor CSS
                //------------------------------
                //- Add Vendor specific CSS
                append vendorcss
                    link(rel='stylesheet', type='text/css', href='../../../app-assets/vendors/css/ui/prism.min.css')
                //- Page CSS
                //------------------------------
                //- Add custom page specific CSS
                append pagecss
                //- Vendor JS
                //------------------------------
                //- Add vendor specific JS
                append vendorjs
                    script(type='text/javascript' ,src='../../../app-assets/vendors/js/ui/prism.min.js')
                //- Page JS
                //------------------------------
                //- Add custom page specific JS
                append pagejs