Digi Product API Services

The .navbar-marketing component is used throughout SB UI Kit Pro. A Pug mixin is used to include it with each page. The content of the navbar itself can be modified within the mixin itself, which is located in the src/pug/pages/mixins/navbar.pug file. Modifying this file is where you will update the navbar items, the items within the navbar dropdowns, and which pages these items point to.

When including the navbar within a page, you can do so by using the Pug mixin. By default, a Pug mixin will look as follows:

include mixins/navbar.pug
+navbar({
                            navbarBg: 'bg-transparent',
                            navbarStyle: 'navbar-dark',
                            navbarBrandColor: 'text-white',
                            navbarBtnColor: 'btn-teal',
                            navbarContainer: 'container',
                            navbarPosition: 'fixed-top'
})
include mixins/navbar.pug
+navbar({
    navbarBg: 'bg-transparent',
    navbarStyle: 'navbar-dark',
    navbarBrandColor: 'text-white',
    navbarBtnColor: 'btn-teal',
    navbarContainer: 'container',
    navbarPosition: 'fixed-top'
})
Configuration Options
  • navbarBg - Sets the background color of the navbar. Use any background color utility class (ex: bg-transparent or bg-primary)
  • navbarStyle - Sets the color and styling of the navbar links and content. Use either navbar-dark or navbar-light.
  • navbarBrandColor - Sets the color of the .navbar-brand element. Works with text or SVG (ex: text-white or text-dark). when using an SVG, the fill color of the SVG must not be set so it will inherit it's fill color from the parent text color
  • navbarBtnColor - Sets the color of the button in the navbar. Use any button color class (ex: btn-primary or btn-secondary).
  • navbarContainer - Defines the container type of the navbar content. Use either container or container-fluid for a fluid width layout.
  • navbarPosition - Sets the navbar positioning. Use either fixed-top or keep blank.