Navbar The responsive navbar component supports branding, navigation, buttons, dropdowns and search
Enable Component
Enable the navbar component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                navbar: true // Enable navbar component
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<nav class="navbar navbar-expand-md navbar-theming">
    <div class="container-fluid gx-4">
        <div class="navbar-content-first">
            ...
        </div>
        <div class="navbar-content-middle">
            ...
        </div>
        <div class="navbar-content-last">
            ...
        </div>
    </div>
</nav>
NameDescription
.navbarBase class of the navbar
.navbar.navbar-expand-{xs,sm,md,lg,xl,xxl}Commands the navbar to show the navbar toggler on a certain breakpoint
.navbar.navbar-themingApplies theming of the navbar based on the primary color, for both default and alt themes based on themes configuration
.navbar > .navbar-content-firstBase class of the wrapper of the navbar's left side
.navbar > .navbar-content-middleBase class of the wrapper of the navbar's middle area
.navbar > .navbar-content-lastBase class of the wrapper of the navbar's right side
Customize variables at:/library/extend/components/_navbar.scss
Component's defaults:/library/components/navbar/_defaults.scss
NameDefault valueNote
$toolbar-min-height56px
$navbar-min-height64px
$navbar-padding-y$spacer / 2
$navbar-padding-xnull
$navbar-nav-link-padding-x.75rem
$navbar-brand-font-size$font-size-lg
$nav-link-height$font-size-base * $line-height-base + $nav-link-padding-y * 2
$navbar-brand-height$navbar-brand-font-size * $line-height-base
$navbar-brand-padding-y($nav-link-height - $navbar-brand-height) / 2
$navbar-brand-margin-end.75rem
$navbar-toggler-padding-y.25rem
$navbar-toggler-padding-x.75rem
$navbar-toggler-font-size$font-size-lg
$navbar-toggler-border-radius$btn-border-radius
$navbar-toggler-focus-width$btn-focus-width
$navbar-toggler-transitionbox-shadow .15s ease-in-out
$navbar-dark-colorrgba($white, .55)
$navbar-dark-hover-colorrgba($white, .75)
$navbar-dark-active-color$white
$navbar-dark-disabled-colorrgba($white, .25)
$navbar-dark-toggler-icon-bgurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>")
$navbar-dark-toggler-border-colortransparent
$navbar-light-colorrgba($black, .55)
$navbar-light-hover-colorrgba($black, .7)
$navbar-light-active-colorrgba($black, .9)
$navbar-light-disabled-colorrgba($black, .3)
$navbar-light-toggler-icon-bgurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>")
$navbar-light-toggler-border-colorlight
$navbar-light-brand-color$navbar-light-active-color
$navbar-light-brand-hover-color$navbar-light-active-color
$navbar-dark-brand-color$navbar-dark-active-color
$navbar-dark-brand-hover-color$navbar-dark-active-color
$navbar-background-colornavbar-backgeound-color
$navbar-shadownavbar-shadow
$navbar-colornavbar-color
$navbar-brand-colornavbar-brand-color
$navbar-brand-hover-colornavbar-brand-hover-color
$navbar-link-colornavbar-link-color
$navbar-link-hover-colornavbar-link-hover-color
$navbar-link-active-colornavbar-link-active-color
$navbar-toggler-border-colornavbar-toggler-border-color
$navbar-toggler-icon-bgurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{theme.get(default, true, navbar-toggler-icon-color)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>")Requires @use "@library/sass/modules/theme";
$navbar-toggler-icon-bg-alturl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{theme.get(alt, true, navbar-toggler-icon-color)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>")Requires @use "@library/sass/modules/theme";

Make sure to read the Customize components and Understanding and using the design system guides.

{title}