#4101: navbar.scss

site/_sass/uikit/components/navbar.scss

Path: site/_sass/uikit/theme/navbar.scss · Lines: 136 · Active vars: 12 · Hook placeholders: 25

Purpose: Themes the main navigation bar — the single most visible UI component. Controls: UPPERCASE small-font nav items, 25px-padded dropdowns with 12px-blur shadow, 15px gap between nav and dropdown, dropdown grid dividers, and dropbar shadow. ALL 25 hook mixins are commented out — styling achieved purely through variable overrides.

Source: GitHub

537 lines · 242 code · 187 comments · 108 blank

Commit	Message
`ac75fabf3`	Github pages migrated to Asciidoc (2021-08-10)
`acb790ad2`	Fix various typos

Variable system — 12 active overrides

$navbar-nav-item-font-size:         $global-small-font-size !default;     // Small nav labels
$navbar-nav-item-text-transform:    uppercase !default;                   // UPPERCASE branding
$navbar-dropdown-margin:            15px !default;                        // Gap: nav→dropdown
$navbar-dropdown-padding:           25px !default;                        // Spacious dropdowns
$navbar-dropdown-box-shadow:        0 5px 12px rgba(0,0,0,0.15) !default; // Floating effect
$navbar-dropbar-box-shadow:         0 5px 7px rgba(0,0,0,0.05) !default;  // Subtle dropbar
$navbar-dropdown-grid-divider-border-width: $global-border-width !default;

25 hook mixins all commented out — this is a SIGN of clean design. The navbar achieves its entire branded appearance through SCSS variables alone. No custom CSS rules needed. Hook categories: Component (top-level), Container (wrapping div), Nav items (hover/onclick/active states), Toggle (mobile hamburger — 4 hooks including icon), Dropdown nav (4 hooks for items/headers/dividers inside dropdowns), Inverse (6 hooks for dark mode — none implemented).

Shadow system: Dropdowns get 0 5px 12px rgba(0,0,0,0.15) — the 12px blur creates a soft "floating" effect. The 5px vertical offset matches the 15px margin gap, placing the shadow peak right between nav and dropdown. This creates the illusion of the dropdown hovering above page content — a standard material-design pattern.