Navbar
A responsive <nav class="navbar">. Below $nav-expands (1200px) it collapses to a hamburger; above it, the full bar shows.
Structure
| Class | Role |
|---|---|
| .navbar › .container | The bar and its content width. |
| .navbar-brand | Always-visible left area — logo, key links, and the .hamburger button. |
| .navbar-menu | The main menu. Hidden below the breakpoint until the hamburger is pressed. Any <ul> inside is treated as navigation. |
| .navbar-start / .navbar-end | Optional wrappers to split the menu left / right on wide screens. |
| .navbar-item | A vertically-centred item (link, text, button…) placed directly in the bar. |
| li.has-children | A list item that contains a nested <ul> submenu. |
| .hide-above-nav / .hide-below-nav | Show an element only in the collapsed / expanded state. |
Keyboard
| Key | Action |
|---|---|
| Tab / Shift+Tab | Move through links. On wide screens a submenu opens while any link inside it has focus (:focus-within). |
| Enter / Space | Follow the focused link. On narrow screens, on a .has-children link, toggles its submenu instead. |
| Esc | Close the open mobile menu / drawer. |
Basic navbar
Submenus nest to any depth — put .has-children on every parent <li>. On wide screens the first level drops down, deeper levels fly out sideways; on narrow screens they indent.
Off-canvas drawer
Add .is-off-canvas to .navbar-menu and the collapsed menu slides in from the side instead of pushing the page down. Repeat the brand + hamburger inside a .navbar-top so the drawer has its own close control.
Overriding
The bar is branded: $navbar-family (default primary) at its 500 in both modes, with link and hover colours derived from that family's --jf-color-on-* companions. Submenus and the drawer sit on a neutral soft surface instead, so the whole navbar reads correctly in light and dark out of the box.
- Rebrand — set $navbar-family.
- Retune at runtime — the --jf-navbar-* custom properties, tabled below. They stay on :root, so set them there or on a scoped selector.
- Breakpoint — $nav-expands. Also update breakPoints.navBar in your JS if you change it — see the caveat below.
Variables
Sass variables
| Name | Default | Notes |
|---|---|---|
| $generate-navbar | true | Emit the navbar CSS at all. |
| $nav-expands | 1200px | Width at which the bar switches from collapsed to expanded. Keep breakPoints.navBar in your JS in sync — see the note above. |
| $navbar-family | primary | Palette family the bar is branded from. Everything below defaults off it. |
| $navbar-bg-color | get-color($navbar-family) | Bar background → --jf-navbar-bg-color. |
| $navbar-link-bg-color | $navbar-bg-color | Top-level link background → --jf-navbar-link-bg-color. Its text colour is contrast-picked from this. |
| $navbar-link-hover-bg-color | get-color-role($navbar-family, emphasis) | Top-level link background on hover / focus → --jf-navbar-link-hover-bg-color. |
| $navbar-link-hover-weight | $navbar-font-weight | Link weight on hover → --jf-navbar-link-hover-weight. Changing it reflows the bar unless the face is variable. |
| $navbar-link-border | a 12% currentColor rule | Divider between top-level links → --jf-navbar-link-border. |
| $navbar-font-size | token(font-size-lg) | Link text size while collapsed → --jf-navbar-font-size. |
| $navbar-font-size-expanded | token(font-size-base) | Link text size once expanded. Build-time only. |
| $navbar-font-family | token(font-primary) | Link typeface → --jf-navbar-font-family. |
| $navbar-font-weight | get-weight(bold) | Link weight → --jf-navbar-font-weight. |
| $navbar-text-transform | none | Link text-transform → --jf-navbar-text-transform. |
| $navbar-link-padding-x | get-space(xs) | Link inline padding while collapsed → --jf-navbar-link-padding-x. |
| $navbar-link-padding-y | get-space(2xs) | Link block padding while collapsed → --jf-navbar-link-padding-y. |
| $navbar-link-padding-expanded-x | get-space(xs) | Link inline padding once expanded. Build-time only. |
| $navbar-link-padding-expanded-y | get-space(xs) | Link block padding once expanded. Build-time only. |
| $navbar-sublink-bg-color | token(color-bg-soft) | Submenu panel background → --jf-navbar-sublink-bg-color. A neutral surface, not the brand family, so submenus read correctly in both themes. |
| $navbar-sublink-hover-bg-color | get-color-role(neutral, muted) | Submenu link background on hover → --jf-navbar-sublink-hover-bg-color. |
| $navbar-sublink-font-size | token(font-size-md) | Submenu link text size while collapsed. |
| $navbar-sublink-font-size-expanded | token(font-size-sm) | Submenu link text size once expanded. |
| $navbar-sublink-font-family | token(font-primary) | Submenu link typeface. |
| $navbar-sublink-font-weight | $navbar-font-weight | Submenu link weight — inherits the top-level link's by default. |
| $navbar-sublink-font-weight-hover | $navbar-link-hover-weight | Submenu link weight on hover. |
| $navbar-sublink-text-transform | $navbar-text-transform | Submenu link text-transform. |
| $navbar-dropdown-width | get-size(16) (256px) | Width of an expanded submenu panel → --jf-navbar-dropdown-width. |
| $navbar-dropdown-anchors-right-after | 3 | Submenus on the nth top-level item and beyond open to the inline-start instead of the end, so a menu near the edge of the bar does not run off-screen. |
| $navbar-start-flex-align | stretch | align-items on .navbar-start once expanded. |
| $navbar-end-flex-align | center | align-items on .navbar-end once expanded. |
| $navbar-offcanvas-position | right | Side the .is-off-canvas drawer slides in from. |
| $navbar-offcanvas-width | 80% | Drawer width. |
| $navbar-offcanvas-maxwidth | 480px | Cap on that width. |
| $navbar-offcanvas-bg-color | token(color-bg-soft) | Drawer background. |
| $navbar-offcanvas-body-overlay | 50% black | Scrim painted over the page behind an open drawer. |
| $navbar-offcanvas-transition-speed | token(duration-slow) | Drawer slide duration. Zeroed by prefers-reduced-motion along with every other duration token. |
Custom properties
| Name | Default | Notes |
|---|---|---|
| --jf-navbar-bg-color | $navbar-bg-color | Bar background. |
| --jf-navbar-link-color | contrast-picked | Top-level link text, chosen against --jf-navbar-link-bg-color. |
| --jf-navbar-link-bg-color | $navbar-link-bg-color | Top-level link background. |
| --jf-navbar-link-hover-color | contrast-picked | Top-level link text on hover / focus. |
| --jf-navbar-link-hover-bg-color | $navbar-link-hover-bg-color | Top-level link background on hover / focus. |
| --jf-navbar-link-hover-weight | $navbar-link-hover-weight | Top-level link weight on hover. |
| --jf-navbar-link-border | $navbar-link-border | Divider between top-level links. |
| --jf-navbar-sublink-color | contrast-picked | Submenu link text. |
| --jf-navbar-sublink-bg-color | $navbar-sublink-bg-color | Submenu panel background. |
| --jf-navbar-sublink-hover-color | contrast-picked | Submenu link text on hover. |
| --jf-navbar-sublink-hover-bg-color | $navbar-sublink-hover-bg-color | Submenu link background on hover. |
| --jf-navbar-font-size | $navbar-font-size | Link text size. |
| --jf-navbar-font-family | $navbar-font-family | Link typeface. |
| --jf-navbar-font-weight | $navbar-font-weight | Link weight. |
| --jf-navbar-text-transform | $navbar-text-transform | Link text-transform. |
| --jf-navbar-link-padding-x | $navbar-link-padding-x | Link inline padding. |
| --jf-navbar-link-padding-y | $navbar-link-padding-y | Link block padding. |
| --jf-navbar-dropdown-width | $navbar-dropdown-width | Expanded submenu panel width. |