// Name: Navbar // Description: Component to create horizontal navigation bars // // Component: `uk-navbar` // // Sub-objects: `uk-navbar-container` // `uk-navbar-left` // `uk-navbar-right` // `uk-navbar-center` // `uk-navbar-center-left` // `uk-navbar-center-right` // `uk-navbar-nav` // `uk-navbar-parent-icon` // `uk-navbar-item` // `uk-navbar-toggle` // `uk-navbar-subtitle` // `uk-navbar-dropbar` // // Adopted: `uk-navbar-dropdown` + Modifiers // `uk-navbar-dropdown-nav` // `uk-navbar-toggle-icon` // // Modifiers: `uk-navbar-primary` // `uk-navbar-transparent` // `uk-navbar-sticky` // // States: `uk-active` // `uk-parent` // `uk-open` // // ======================================================================== // Variables // ======================================================================== $navbar-gap: 0px !default; // Must have a unit because of `calc` $navbar-nav-gap: 0px !default; // Must have a unit because of `calc` /* ======================================================================== Component: Navbar ========================================================================== */ /* * 1. Create position context to center navbar group */ .uk-navbar { display: flex; /* 1 */ position: relative; @if(mixin-exists(hook-navbar)) {@include hook-navbar();} } /* Container ========================================================================== */ .uk-navbar-container:not(.uk-navbar-transparent) { background: $navbar-background; @if(mixin-exists(hook-navbar-container)) {@include hook-navbar-container();} } // Color Mode @if ( $navbar-color-mode == light ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-light !optional;} } @if ( $navbar-color-mode == dark ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-dark !optional;} } /* Groups ========================================================================== */ /* * 1. Align navs and items vertically if they have a different height */ .uk-navbar-left, .uk-navbar-right, [class*='uk-navbar-center'] { display: flex; gap: $navbar-gap; /* 1 */ align-items: center; } /* * Horizontal alignment * 1. Create position context for centered navbar with sub groups (left/right) * 2. Fix text wrapping if content is larger than 50% of the container. * 3. Needed for dropdowns because a new position context is created * `z-index` must be smaller than off-canvas * 4. Align sub groups for centered navbar */ .uk-navbar-right { margin-left: auto; } .uk-navbar-center:only-child { margin-left: auto; margin-right: auto; /* 1 */ position: relative; } .uk-navbar-center:not(:only-child) { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); /* 2 */ width: max-content; box-sizing: border-box; /* 3 */ z-index: $global-z-index - 10; } /* 4 */ .uk-navbar-center-left, .uk-navbar-center-right { position: absolute; top: 0; } .uk-navbar-center-left { right: unquote('calc(100% + #{$navbar-gap})'); } .uk-navbar-center-right { left: unquote('calc(100% + #{$navbar-gap})'); } [class*='uk-navbar-center-'] { width: max-content; box-sizing: border-box; } /* Nav ========================================================================== */ /* * 1. Reset list */ .uk-navbar-nav { display: flex; gap: $navbar-nav-gap; /* 1 */ margin: 0; padding: 0; list-style: none; } /* * Allow items to wrap into the next line * Only not `absolute` positioned groups */ .uk-navbar-left, .uk-navbar-right, .uk-navbar-center:only-child { flex-wrap: wrap; } /* * Items * 1. Center content vertically and horizontally * 2. Imitate white space gap when using flexbox * 3. Dimensions * 4. Style * 5. Required for `a` */ .uk-navbar-nav > li > a, // Nav item .uk-navbar-item, // Content item .uk-navbar-toggle { // Clickable item /* 1 */ display: flex; justify-content: center; align-items: center; /* 2 */ column-gap: 0.25em; /* 3 */ box-sizing: border-box; min-height: $navbar-nav-item-height; /* 4 */ font-size: $navbar-nav-item-font-size; font-family: $navbar-nav-item-font-family; /* 5 */ text-decoration: none; } /* * Nav items */ .uk-navbar-nav > li > a { padding: 0 $navbar-nav-item-padding-horizontal; color: $navbar-nav-item-color; @if(mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();} } /* * Hover * Apply hover style also if dropdown is opened */ .uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a[aria-expanded="true"] { color: $navbar-nav-item-hover-color; @if(mixin-exists(hook-navbar-nav-item-hover)) {@include hook-navbar-nav-item-hover();} } /* OnClick */ .uk-navbar-nav > li > a:active { color: $navbar-nav-item-onclick-color; @if(mixin-exists(hook-navbar-nav-item-onclick)) {@include hook-navbar-nav-item-onclick();} } /* Active */ .uk-navbar-nav > li.uk-active > a { color: $navbar-nav-item-active-color; @if(mixin-exists(hook-navbar-nav-item-active)) {@include hook-navbar-nav-item-active();} } /* Parent icon modifier ========================================================================== */ .uk-navbar-parent-icon { margin-left: $navbar-parent-icon-margin-left; transition: transform 0.3s ease-out; } .uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon { transform: rotateX(180deg); } /* Item ========================================================================== */ .uk-navbar-item { padding: 0 $navbar-item-padding-horizontal; color: $navbar-item-color; @if(mixin-exists(hook-navbar-item)) {@include hook-navbar-item();} } /* * Remove margin from the last-child */ .uk-navbar-item > :last-child { margin-bottom: 0; } /* Toggle ========================================================================== */ .uk-navbar-toggle { padding: 0 $navbar-item-padding-horizontal; color: $navbar-toggle-color; @if(mixin-exists(hook-navbar-toggle)) {@include hook-navbar-toggle();} } .uk-navbar-toggle:hover, .uk-navbar-toggle[aria-expanded="true"] { color: $navbar-toggle-hover-color; text-decoration: none; @if(mixin-exists(hook-navbar-toggle-hover)) {@include hook-navbar-toggle-hover();} } /* * Icon * Adopts `uk-icon` */ .uk-navbar-toggle-icon { @if(mixin-exists(hook-navbar-toggle-icon)) {@include hook-navbar-toggle-icon();} } /* Hover */ :hover > .uk-navbar-toggle-icon { @if(mixin-exists(hook-navbar-toggle-icon-hover)) {@include hook-navbar-toggle-icon-hover();} } /* Subtitle ========================================================================== */ .uk-navbar-subtitle { font-size: $navbar-subtitle-font-size; @if(mixin-exists(hook-navbar-subtitle)) {@include hook-navbar-subtitle();} } /* Justify modifier ========================================================================== */ .uk-navbar-justify .uk-navbar-left, .uk-navbar-justify .uk-navbar-right, .uk-navbar-justify .uk-navbar-nav, .uk-navbar-justify .uk-navbar-nav > li, // Nav item .uk-navbar-justify .uk-navbar-item, // Content item .uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; } /* Style modifiers ========================================================================== */ .uk-navbar-primary { @if(mixin-exists(hook-navbar-primary)) {@include hook-navbar-primary();} } .uk-navbar-transparent { @if(mixin-exists(hook-navbar-transparent)) {@include hook-navbar-transparent();} } .uk-navbar-sticky { @if(mixin-exists(hook-navbar-sticky)) {@include hook-navbar-sticky();} } /* Dropdown ========================================================================== */ /* * Adopts `uk-drop` * 1. Set a default width * 2. Style */ .uk-navbar-dropdown { --uk-position-offset: #{$navbar-dropdown-margin}; --uk-position-shift-offset: #{$navbar-dropdown-shift-margin}; --uk-position-viewport-offset: #{$navbar-dropdown-viewport-margin}; /* 1 */ width: $navbar-dropdown-width; /* 2 */ padding: $navbar-dropdown-padding; background: $navbar-dropdown-background; color: $navbar-dropdown-color; @if(mixin-exists(hook-navbar-dropdown)) {@include hook-navbar-dropdown();} } /* * Remove margin from the last-child */ .uk-navbar-dropdown > :last-child { margin-bottom: 0; } // Color Mode @if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown { @extend .uk-light !optional;} } @if ( $navbar-dropdown-color-mode == dark ) { .uk-navbar-dropdown { @extend .uk-dark !optional;} } @if ($navbar-dropdown-color-mode != $inverse-global-color-mode) { .uk-navbar-dropdown :focus-visible { outline-color: $navbar-dropdown-focus-outline !important; } } /* * Grid * Adopts `uk-grid` */ /* Gutter Horizontal */ .uk-navbar-dropdown .uk-drop-grid { margin-left: (-$navbar-dropdown-grid-gutter-horizontal); } .uk-navbar-dropdown .uk-drop-grid > * { padding-left: $navbar-dropdown-grid-gutter-horizontal; } /* Gutter Vertical */ .uk-navbar-dropdown .uk-drop-grid > .uk-grid-margin { margin-top: $navbar-dropdown-grid-gutter-vertical; } /* * Width modifier */ .uk-navbar-dropdown-width-2:not(.uk-drop-stack) { width: ($navbar-dropdown-width * 2); } .uk-navbar-dropdown-width-3:not(.uk-drop-stack) { width: ($navbar-dropdown-width * 3); } .uk-navbar-dropdown-width-4:not(.uk-drop-stack) { width: ($navbar-dropdown-width * 4); } .uk-navbar-dropdown-width-5:not(.uk-drop-stack) { width: ($navbar-dropdown-width * 5); } /* * Size modifier */ .uk-navbar-dropdown-large { --uk-position-shift-offset: #{$navbar-dropdown-large-shift-margin}; padding: $navbar-dropdown-large-padding; @if(mixin-exists(hook-navbar-dropdown-large)) {@include hook-navbar-dropdown-large();} } /* * Dropbar modifier * 1. Reset dropdown width to prevent to early shifting * 2. Reset style * 3. Padding */ .uk-navbar-dropdown-dropbar { /* 1 */ width: auto; /* 2 */ background: transparent; /* 3 */ padding: $navbar-dropdown-dropbar-padding-top 0 $navbar-dropdown-dropbar-padding-bottom 0; --uk-position-offset: #{$navbar-dropdown-dropbar-margin}; --uk-position-shift-offset: #{$navbar-dropdown-dropbar-shift-margin}; --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin}; @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();} } /* Phone landscape and bigger */ @media (min-width: $breakpoint-small) { .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin-s}; } } /* Tablet landscape and bigger */ @media (min-width: $breakpoint-medium) { .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin-m}; } } .uk-navbar-dropdown-dropbar-large { --uk-position-shift-offset: #{$navbar-dropdown-dropbar-large-shift-margin}; padding-top: $navbar-dropdown-dropbar-large-padding-top; padding-bottom: $navbar-dropdown-dropbar-large-padding-bottom; @if(mixin-exists(hook-navbar-dropdown-dropbar-large)) {@include hook-navbar-dropdown-dropbar-large();} } /* Dropdown Nav * Adopts `uk-nav` ========================================================================== */ .uk-navbar-dropdown-nav { @if(mixin-exists(hook-navbar-dropdown-nav)) {@include hook-navbar-dropdown-nav();} } /* * Items */ .uk-navbar-dropdown-nav > li > a { color: $navbar-dropdown-nav-item-color; @if(mixin-exists(hook-navbar-dropdown-nav-item)) {@include hook-navbar-dropdown-nav-item();} } /* Hover */ .uk-navbar-dropdown-nav > li > a:hover { color: $navbar-dropdown-nav-item-hover-color; @if(mixin-exists(hook-navbar-dropdown-nav-item-hover)) {@include hook-navbar-dropdown-nav-item-hover();} } /* Active */ .uk-navbar-dropdown-nav > li.uk-active > a { color: $navbar-dropdown-nav-item-active-color; @if(mixin-exists(hook-navbar-dropdown-nav-item-active)) {@include hook-navbar-dropdown-nav-item-active();} } /* * Subtitle */ .uk-navbar-dropdown-nav .uk-nav-subtitle { font-size: $navbar-dropdown-nav-subtitle-font-size; @if(mixin-exists(hook-navbar-dropdown-nav-subtitle)) {@include hook-navbar-dropdown-nav-subtitle();} } /* * Header */ .uk-navbar-dropdown-nav .uk-nav-header { color: $navbar-dropdown-nav-header-color; @if(mixin-exists(hook-navbar-dropdown-nav-header)) {@include hook-navbar-dropdown-nav-header();} } /* * Divider */ .uk-navbar-dropdown-nav .uk-nav-divider { border-top: $navbar-dropdown-nav-divider-border-width solid $navbar-dropdown-nav-divider-border; @if(mixin-exists(hook-navbar-dropdown-nav-divider)) {@include hook-navbar-dropdown-nav-divider();} } /* * Sublists */ .uk-navbar-dropdown-nav .uk-nav-sub a { color: $navbar-dropdown-nav-sublist-item-color; } .uk-navbar-dropdown-nav .uk-nav-sub a:hover { color: $navbar-dropdown-nav-sublist-item-hover-color; } .uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a { color: $navbar-dropdown-nav-sublist-item-active-color; } /* Dropbar ========================================================================== */ /* * Adopts `uk-dropnav-dropbar` */ .uk-navbar-dropbar { @if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();} } /* * Create navbar placeholder space if dropbar is behind navbar */ .uk-navbar-dropbar-behind::before { content: ""; display: block; height: $navbar-nav-item-height; } // Hooks // ======================================================================== @if(mixin-exists(hook-navbar-misc)) {@include hook-navbar-misc();} // @mixin hook-navbar(){} // @mixin hook-navbar-container(){} // @mixin hook-navbar-nav-item(){} // @mixin hook-navbar-nav-item-hover(){} // @mixin hook-navbar-nav-item-onclick(){} // @mixin hook-navbar-nav-item-active(){} // @mixin hook-navbar-item(){} // @mixin hook-navbar-toggle(){} // @mixin hook-navbar-toggle-hover(){} // @mixin hook-navbar-toggle-icon(){} // @mixin hook-navbar-toggle-icon-hover(){} // @mixin hook-navbar-subtitle(){} // @mixin hook-navbar-primary(){} // @mixin hook-navbar-transparent(){} // @mixin hook-navbar-sticky(){} // @mixin hook-navbar-dropdown(){} // @mixin hook-navbar-dropdown-large(){} // @mixin hook-navbar-dropdown-dropbar(){} // @mixin hook-navbar-dropdown-dropbar-large(){} // @mixin hook-navbar-dropdown-nav(){} // @mixin hook-navbar-dropdown-nav-item(){} // @mixin hook-navbar-dropdown-nav-item-hover(){} // @mixin hook-navbar-dropdown-nav-item-active(){} // @mixin hook-navbar-dropdown-nav-subtitle(){} // @mixin hook-navbar-dropdown-nav-header(){} // @mixin hook-navbar-dropdown-nav-divider(){} // @mixin hook-navbar-dropbar(){} // @mixin hook-navbar-misc(){} // Inverse // ======================================================================== // @mixin hook-inverse-navbar-nav-item(){} // @mixin hook-inverse-navbar-nav-item-hover(){} // @mixin hook-inverse-navbar-nav-item-onclick(){} // @mixin hook-inverse-navbar-nav-item-active(){} // @mixin hook-inverse-navbar-item(){} // @mixin hook-inverse-navbar-toggle(){} // @mixin hook-inverse-navbar-toggle-hover(){}