Navbar SCSS Sources

The Navbar component comes packed with a set of SCSS mixins and functions you can use for various purposes. The idea behind is to allow for flexible customization and enable seamless integration with third party applications.

While the component can work out of the box with Bootstrap with minor markup adjustments, some special mixins have been developed to better complement the library without overloading the render and keeping the same design concept.

Starting with version 3.1.x, Navbar supports CSS variables for setting all styling, color and layout of the navbar and sub-menu, except the responsive breakpoint.

Main SCSS Mixins

Next up, we're going to highlight the navbar component features out of the box, with the default style applied to the default markup. There are several mixins you can combine or extend, for instance the navbar.scss file sets the default style and uses the default mixins:

@import 'variables', 'mixins', 'root';

@include navbar-mobile-layout;
@include navbar-desktop-layout;
@include navbar-style;
@include nav-layout;
@include nav-style;
@include subnav-style;
@include main-menu;
  • navbar-mobile-layout provides the basic layout styling and base typography for the mobile view of the navbar as well as for its parts, specifically the brand link, navbar-toggle button and the menu wrapper;
  • navbar-desktop-layout overrides the layout styling for larger screen sizes and desktop computers by changing the flexbox properties and elements visibility;
  • navbar-style sets the navbar background but also sets text color for the brand link, regular links, text contents;
  • nav-layout sets the layout style for the menu itself, then for root menu items and the sub-menu items, all in terms of spacing, typography, etc; in addition it sets the menu icons layout style;
  • nav-style sets the text color and background color for root menu items, for normal, active and hover states;
  • subnav-style sets the background color and the box-shadow for the sub-menu, the text color and background color for sub-menu items, for normal, active and hover states; if you don't use any sub-menus, you can skip this mixin all together;
  • main-menu sets the position of the sub-menus as well as the animation for each level.

In other cases shown in the demos, some of these mixins can be skiped, others can be configured for different other unique purposes. For instance the Left Menu build only styles the menu itself, or the Bootstrap build uses its own specific set of mixins, to preserve the original design concept.

CSS / SCSS Variables

The SCSS mixins are fed a series of variables you can control, anything from typography and spacing to colors and animation. The input values can change how the mixins function by providing specific values:

  • Typography variables are designed to set an overall consistent layout and some of them can be inherited in the menu tree structure.
  • Typography in general is designed to cover various other content types, within the navbar itself or sub-menu items, but you can remove parts or entire sets of style rules, just by using specific input values.
  • Color variables can also be inherited in the menu tree, but mixins will then apply a small contrast to avoid any possible visual inconsistency.
  • While accepting valid color values, variables related to text color can also use auto value, so you can have less work to worry about.
  • In other cases the style rule is automatically reduntant, for instance brand link text color and background are not needed when you use an <img> element, a case where you only need to adjust some spacing.
  • Keep in mind that the mixins use variables designated for navbar and root menu items apply to mobile devices on all menu tree structure, while variables designated for sub-menu apply on non-mobile devices. This is why we call our component a mobile first design concept.
  • Due to the nature of the automatic and/or inherit functionality, the mixins also provide a fail-safe mechanism for invalid input values, but mixins will provide a log of the build process.

Navbar Padding and Global Typography

First we have the Navbar padding setting, which is ZERO by default, but when used it will make easier integration with third party application, as we will see in the Bootstrap demo.

Then the global navbar typography variables are important for the size of menu items of the root menu, the brand link, menu icons, as well as other content items. These values are inherited by sub-menu items and other contents as we'll see in a minute. Valid values are expected, but when you set to ZERO, the style rules are removed, so then the navbar will inherit these values from a parent element.

// NAVBAR METRIX
$navbar-padding-x: 0 !default;
$navbar-padding-y: 0 !default;
$navbar-line-height: 1.5rem !default;
$navbar-font-size: 14px !default;
  • $navbar-padding-x sets the horizontal padding for the navbar;
  • $navbar-padding-y sets the vertical padding for the navbar;
  • $navbar-line-height sets the globally applied line-height of the navbar;
  • $navbar-font-size sets the globally applied font-size of the navbar.

These SCSS variables are translated into the following CSS variables:

// NAVBAR METRIX
--n-padding-x: #{real-size($navbar-padding-x, 1)};
--n-padding-y: #{real-size($navbar-padding-y, 1)};
--n-line-height: #{$navbar-line-height};
--n-font-size: #{$navbar-font-size};

The padding related CSS variables are forced to use a unit via the real-size() function, the resulting values are consistent with the CSS calc() function.

Primary Color

The color you can use to highlight active menu items. The variable expects valid HEX, RGBA, RGB or transparent values.

// PRIMARY COLOR
$primary-color: #006699 !default;
  • $primary-color sets an accent color to be used by active menu items for text color or background color, in our case it's the second.

This value is then used by the CSS variable:

// PRIMARY COLOR
--n-primary-color: #{$primary-color};

Navbar and Submenu Background

The navbar global color variables are both totally up to your project, they expect valid values HEX, RGBA, RGB or transparent. The $navbar-background is required to determine the value of other variables set to auto as we'll see in a minute.

The sub-menu can use its own background color or inherit the value of $navbar-background with a light contrast applied when set to inherit.

// NAVBAR AND SUBNAV BACKGROUND COLOR
$navbar-background: #687c86 !default;
$subnav-background: #dadee0 !default;
  • $navbar-background sets the navbar background color.
  • $subnav-background sets the background color for sub-menus.

These SCSS variables are then pushed into the following CSS variables:

// NAVBAR AND SUBNAV BACKGROUND COLOR
--n-bg: #{$navbar-background};
--n-subnav-bg: #{$subnav-background};

Navbar Text Colors

The following variables set the global navbar text color and anchor link color. The expected values are HEX, RGBA, RGB, transparent or auto.

When set to auto the mixins will set a color based on the lightness of the above $navbar-background, with a light contrast for text content and a stronger contrast for links. Now if the background is also transparent the style rule is again removed so you must provide a valid color value if that is required in order to keep consistency in check.

// NAVBAR TEXT COLORS
$navbar-text-color: auto !default;
$navbar-link-color: auto !default;
$navbar-link-color-hover: auto !default;
  • $navbar-text-color sets a global color for regular text content;
  • $navbar-link-color sets a global color for anchor links and applies to non-menu item links;
  • $navbar-link-color-hover sets a global color for anchor links in hover state.

These variables are then processed to have good contrast with the navbar background and pushed into the CSS variables:

// NAVBAR TEXT COLORS
--n-text-color: #{get-color($navbar-text-color, $navbar-background, .55)};
--n-link-color: #{get-color($navbar-link-color, $navbar-background, .75)};
--n-link-color-hover: #{get-color($navbar-link-color-hover, $navbar-background, .95)};

These global color values apply mostly for the mobile layout and they are important for the .navbar-toggle and .subnav-toggle elements.

Submenu Text Colors

These variables override the above variables for sub-menu content items on non-mobile devices and work pretty much the same. They expect the same HEX, RGBA, RGB, transparent or auto values. When set to transparent, the respective style rule is ignored and when set to auto the color is determined based on the lightness of $subnav-background or $subnav-item-background if any of them is set a valid color value, if not, the style rule is removed.

// SUBNAV TEXT COLORS
$subnav-text-color: auto !default;
$subnav-link-color: auto !default;
$subnav-link-color-hover: auto !default;
  • $subnav-text-color sets a color for regular text content inside your sub-menu;
  • $subnav-link-color sets a color for anchor links inside your sub-menu;
  • $subnav-link-color-hover sets a color for anchor links inside your sub-menu in hover state.

Similar with above CSS variables, same apply to sub-menus on the desktop layout:

// SUBNAV TEXT COLORS
--n-subnav-text-color: #{get-color($subnav-text-color, $subnav-background, .55)};
--n-subnav-link-color: #{get-color($subnav-link-color, $subnav-background, .75)};
--n-subnav-link-color-hover: #{get-color($subnav-link-color-hover, $subnav-background, .95)};

Menu Item Metrics

These variables set the global typography and spacing strictly for menu items. Accepted values are basically all numerical em, vw, vh, rem, px based values or inherit. When inherit is set for the first two of the below, $navbar-font-size and $navbar-line-height will be used respectivelly; when any of the two variables are set to ZERO, their respective style rules are removed.

Now the next two variables $item-padding-y and $item-padding-x are used for the menu item padding, both the root menu items and sub-menu items, but also for other spacing related variables used for other content items or sub-menu.

The last two variables $root-item-padding and $subnav-item-padding set the menu item padding; the first is important for the general layout of the menu and is inherited by the second when that is set to inherit.

The $root-item-padding-x $root-item-padding-y are very important, they must set a valid value.

// MENU ITEM METRIX
$root-item-font-size: $navbar-font-size !default;
$root-item-line-height: $navbar-line-height !default;
$subnav-item-font-size: inherit !default;
$subnav-item-line-height: inherit !default;
$item-padding-y: 0.5rem !default;
$item-padding-x: 1rem !default;
$root-item-margin: 0 !default;
$subnav-item-margin: 0 !default;
  • $root-item-font-size sets a font size for root menu items and overrides the $navbar-font-size if a valid value is set;
  • $root-item-line-height sets a line height for menu items, overrides the $navbar-line-height if a valid value is set;
  • $subnav-item-font-size sets a font size for sub-menu items and overrides the $subnav-font-size if a valid value is set;
  • $subnav-item-line-height sets a line height for sub-menu items, overrides the $subnav-line-height if a valid value is set;
  • $item-padding-y sets a global vertical spacing for menu items;
  • $item-padding-x sets a global horizontal spacing for menu items;
  • $root-item-margin sets the margin for root menu items, but only for desktop layout;
  • $subnav-item-margin sets the margin for sub-menu items and applies only to the desktop layout.

These variables are pushed into the following CSS variables:

// MENU ITEM METRIX
--n-item-font-size: #{$root-item-font-size};
--n-item-line-height: #{$root-item-line-height};
--n-item-padding-y: #{$item-padding-y};
--n-item-padding-x: #{$item-padding-x};
--n-item-margin: #{$root-item-margin};
--n-subnav-item-font-size: #{$subnav-item-font-size};
--n-subnav-item-line-height: #{$subnav-item-line-height};
--n-subnav-item-padding-x: var(--n-item-padding-x);
--n-subnav-item-padding-y: var(--n-item-padding-y);
--n-subnav-item-margin: #{$subnav-item-margin};

Keep in mind that overriding any of the --n-item-padding-x and --n-item-padding-y as well as --n-subnav-item-padding-x and --n-subnav-item-padding-y will also update the spacing of all menu icons.

Brand Metrics

These variables are mostly optional, especially if you have your own special branding design. As with the other menu item metrics, you can either set a valid value or ZERO if you choose to cancel the style rules associated with these variables. All these values apply to your <a class="brand"> element and affect all devices.

// BRAND METRIX
$brand-font-size: 18px !default;
$brand-line-height: inherit !default;
  • $brand-font-size sets a font size for your .brand element;
  • $brand-line-height sets a line height for .brand element.

These variables are then pushed into the following CSS variables:

// BRAND METRIX
--n-brand-font-size: #{$brand-font-size};
--n-brand-line-height: #{$brand-line-height};
--n-brand-padding: var(--n-item-padding-y) var(--n-item-padding-x);

Submenu Metrics

Next we can have a look at the variables responsible for the layout of the sub-menu itself. These variables have some special designation because they apply only to a certain level sub-menu. Keep in mind that the $subnav-width is important for layout consistency.

// SUBNAV METRIX
$subnav-line-height: inherit !default;
$subnav-font-size: inherit !default;
$subnav-margin: 0 !default;
$subnav-padding: 0 !default;
$subnav-width: 200px !default;
$subnav-larger-width: ($subnav-width * 3) !default;
  • $subnav-line-height sets the line-height for your sub-menu on non-mobile devices; when set to inherit the value from $navbar-line-height is used;
  • $subnav-font-size sets the font-size for your sub-menu on non-mobile devices; when set to inherit the value from $navbar-font-size is used; this and the above variable are very important when using menus without the navbar wrapper;
  • $subnav-margin sets a margin for the FIRST .subnav element, we'll talk more about this in the Bootstrap demo page;
  • $subnav-padding sets a padding for the FIRST .subnav element; it's best to use a valid single number value like 10px to also adjust the below larger width;
  • $subnav-width sets the width of all <ul class="subnav"> elements;
  • $subnav-larger-width sets the width of the <div class="subnav"> element, the mega-menu wrapper.

The following CSS variables are set:

// SUBNAV METRIX
--n-subnav-padding-x: #{real-size($subnav-padding-x, 1)};
--n-subnav-padding-y: #{real-size($subnav-padding-y, 1)};
--n-subnav-line-height: #{$subnav-line-height};
--n-subnav-font-size: #{$subnav-font-size};
--n-subnav-width: #{$subnav-width};
--n-subnav-larger-width: calc(var(--n-subnav-width) * 3 + var(--n-subnav-padding-x) * 2);

Now here comes the importance of the use of real-size() function to make sure the --n-subnav-larger-width is consistent with its calc() set value.

Menu Item Colors

Now we can talk about the menu item text color and background color. First we talk about the variables that deal with the root menu items which apply globally on mobile view. As usual the transparent value removes the style rule, while for text color variables the auto value can be quite handy.

When you set $root-item-color to auto and a valid color value for root-item-background then your color will be determined based on this background color, then will check for $navbar-background, if both of these backgrounds are not valid, the style rule will be removed and your menu items will use an inherited style rule. The same applies to hover state of the menu items, and the mixins will check the $root-item-hover-background value first.

// MENU ITEM COLOR STYLING
$root-item-color: auto !default;
$root-item-background: transparent !default;
$root-item-hover-color: $navbar-background !default;
$root-item-hover-background: rgba(255,255,255,0.85) !default;
$root-item-active-color: #fff !default;
$root-item-active-background: $primary-color !default;
  • $root-item-color sets the text color for root menu items;
  • $root-item-background sets the background color for root menu items;
  • $root-item-hover-color sets the hover state text color for the root menu items;
  • $root-item-hover-background sets the hover state background color for the root menu items;
  • $root-item-active-color sets the active state text color for root menu items;
  • $root-item-active-background sets the active state background color for root menu items; this is where we usually make use of the $primary-color value.
// MENU ITEM COLOR STYLING
--n-item-color: #{get-item-color($root-item-color, $root-item-background, $navbar-background, .65)};
--n-item-bg: #{$root-item-background};
--n-item-hover-color: #{get-item-color($root-item-hover-color, $root-item-hover-background, $navbar-background, .85)};
--n-item-hover-bg: #{$root-item-hover-background};
--n-item-active-color: #{get-item-color($root-item-active-color, $root-item-active-background, $navbar-background, 1)};
--n-item-active-bg: var(--n-primary-color);

The special get-item-color() function is used to set proper text colors in contrast with the background, for all states of the root menu item.

Submenu Item Colors

Next we have the sub-menu item text color and background color. The exact same principle applies as for the above, however these variables override the above for sub-menu items and only affect the desktop and large screen devices.

// SUBNAV MENU ITEM COLOR
$subnav-item-color: auto !default;
$subnav-item-background: transparent !default;
$subnav-item-hover-color: auto !default;
$subnav-item-hover-background: rgba(0,0,0,0.4) !default;
$subnav-item-active-color: #fff !default;
$subnav-item-active-background: $primary-color !default;
  • $subnav-item-color sets the text color for sub-menu items;
  • $subnav-item-background sets the background color for sub-menu items;
  • $subnav-item-hover-color sets the hover state text color for sub-menu items;
  • $subnav-item-hover-background sets the hover state background color for sub-menu items;
  • $subnav-item-active-color sets the active state text color for sub-menu items;
  • $subnav-item-active-background sets the active state background color for sub-menu items; again we make use of the $primary-color value.
// SUBNAV MENU ITEM COLOR
--n-subnav-item-color: #{get-item-color($subnav-item-color, $subnav-item-background, $subnav-background, .65)};
--n-subnav-item-bg: #{$subnav-item-background};
--n-subnav-item-hover-color: #{get-item-color($subnav-item-hover-color, $subnav-item-hover-background, $subnav-background, .85)};
--n-subnav-item-hover-bg: #{$subnav-item-hover-background};
--n-subnav-item-active-color: #{get-item-color($subnav-item-active-color, $subnav-item-active-background, $subnav-background, 1)};
--n-subnav-item-active-bg: var(--n-primary-color);

Similar to root menu items, the get-item-color() function will do the same for sub-menu items.

Brand Link Color

If you're not using a media element for your brand, you can easily set a brand link text color:

// BRAND LINK COLOR
$brand-link-color: auto !default;
  • $brand-link-color sets the text color for the <a class="brand"> element.

The corresponding CSS variable is:

// BRAND LINK COLOR
--n-brand-link-color: #{get-color($brand-link-color, $navbar-background, .95)};

Miscellaneous

A set of variables that control various things, but the most important is the $responsive-breakpoint variable. The default value is 768px which is also the default value of the breakpoint option required by the Navbar JavaScript API for initialization. When you change the value of this variable, you must make the necessary adjustments to your navbar markup or initialization options.

// MISC
$responsive-breakpoint: 768px !default;
$subnav-zindex: 50 !default;
$icon-height: auto !default;
$navbar-toggle-padding: 0.125rem 0.5rem !default;
$mobile-expanded-background: auto !default;
$subnav-shadow: 2px 2px 4px 2px rgba(0,0,0,.25) !default;
$base-radius: 0.25rem !default;
  • $responsive-breakpoint sets the width of the viewport to which the Navbar component switches its behaviour, above this value the menu is expected to work with non-mobile devices, and with mobile devices when the viewport width is below this value;
  • $subnav-zindex sets the z-index for the sub-menus;
  • $icon-height sets the height of all the menu icons, by default we're using one of the above line-height metrics, which is probably most accurate; if your menu has sub-menus and you are using any menu icons, this value or the line-height variables must be a valid em, px, rem based value; the style rule associated to this variable is never removed, the default value is 16px;
  • $navbar-toggle-padding sets the padding for your toggle button visible on mobile devices;
  • $mobile-expanded-background sets a background color for expanded menu items on mobile devices; you can set the transparent value if you want to disable this feature.
  • $subnav-shadow sets a box shadow for all .subnav elements, all your sub-menus; you can set a ZERO value here and the mixins will remove this style rule;
  • $base-radius sets a global border-radius needed for various elements of the navbar, currently used by the toggle button and icons specific to parent menu items.

With the exception of the responsive breakpoint, because the @media query doesn't yet support CSS variables, the corresponding CSS variables here will be:

// MISC
--n-subnav-zindex: #{$subnav-zindex};
--n-icon-height: #{get-icon-height()};
--n-toggle-padding: #{$navbar-toggle-padding};
--n-base-radius: #{$base-radius};
--n-expanded-bg: #{$mobile-expanded-background};
--n-subnav-shadow: #{$subnav-shadow};
thednp © 2023 Go back to top