Navbar
The navbar component is a traditional navbar with link items. In smaller screen sizes it becomes an expandable menu. You can load all the nav items with an array directly on the creation of the component. To load items dynamically as the user traverses down the tree of sub menu items is also an option. This is done with javascript and a request to a JSON file.
Navbar border top
Navigation with a bar and border on the top
<!-- navbar.blade.php -->
<nav class="c-navbar u-position--relative c-navbar--border-top" data-uid="6629894dd73a8">
<div class="c-navbar__toggle">
<!-- icon.blade.php -->
<span class="c-icon c-icon--menu c-icon--material c-icon--material-menu material-symbols-outlined material-symbols-outlined--filled c-icon--size-xl" js-sidebar-trigger="" material-symbol="menu" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6629894dd7423">
</span>
</div>
<div class="c-navbar__logo">
<a href="/">
<!-- image.blade.php -->
<figure class="c-image c-image--type-svg" data-uid="6629894dd748f">
<img src="/assets/img/logotype.svg" alt="A logo" class="c-image__image" />
</figure>
</a>
</div>
<div class="c-navbar__list">
<a
href="#"
aria-label="About"
item-ancestor=""
item-active=""
item-has-children=""
item-children-async=""
>
<div class="c-navbar__item">
<span>About</span>
</div>
</a>
<a
href="#"
aria-label="Stuff"
item-ancestor=""
item-active=""
item-has-children=""
item-children-async=""
>
<div class="c-navbar__item">
<span>Stuff</span>
</div>
</a>
<a
href="#"
aria-label="More"
item-ancestor=""
item-active=""
item-has-children=""
item-children-async=""
>
<div class="c-navbar__item">
<span>More</span>
</div>
</a>
</div>
<div class="c-navbar__item c-navbar__expand">
<button class="c-button c-button__basic c-button__basic--default c-button--md" target="_top" js-toggle-trigger="navbar-content" type="button" aria-label="Meny" data-uid="6629894dd7514">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="expand_more" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629894dd755a">
</span>
</span>
<span class="c-button__label-text ">
Meny
</span>
</span> </button> </div>
<div class="c-navbar__content" js-toggle-item="navbar-content" js-toggle-class="u-height--auto">
<div class="c-navbar__expanded_main">
<a class="c-button c-navbar__prev c-button__basic c-button__basic--default c-button--lg" target="_top" type="button" href="#" aria-label="Hem" data-uid="6629894dd7806">
<span class="c-button__label">
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--arrow-back c-icon--material c-icon--material-arrow_back material-symbols-outlined material-symbols-outlined--filled c-icon--size-lg" aria-hidden="true" material-symbol="arrow_back" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629894dd784f">
</span>
</span>
<span class="c-button__label-text c-button__label-text--reverse">
Hem
</span>
</span> </a>
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography u-margin__top--8 c-typography__variant--h2" data-uid="6629894dd78d3">
Bidrag och Underhåll
</h2>
</div> </div>
</nav>@navbar([
'logo' => '/assets/img/logotype.svg',
'items' => [
"about" => [
"label" => "About",
"href" => "#",
"icon" => "people"
],
"stuff" => [
"label" => "Stuff",
"href" => "#",
"icon" => "people"
],
"more" => [
"label" => "More",
"href" => "#",
"icon" => "people"
]
],
'expanded_prev' => 'Hem',
'expanded_current' => 'Bidrag och Underhåll',
'expanded_menu' => [
"about" => [
"label" => "About",
"href" => "#",
"icon" => "people"
],
"stuff" => [
"label" => "Stuff",
"href" => "#",
"icon" => "people"
],
"more" => [
"label" => "More",
"href" => "#",
"icon" => "people"
]
],
'classList' => ['u-position--relative', 'c-navbar--border-top']
])
@endnavbarNavbar border bottom
Navigation with a bar and border on the bottom
<!-- navbar.blade.php -->
<nav class="c-navbar u-position--relative c-navbar--border-bottom" data-uid="6629894dd7b33">
<div class="c-navbar__toggle">
<!-- icon.blade.php -->
<span class="c-icon c-icon--menu c-icon--material c-icon--material-menu material-symbols-outlined material-symbols-outlined--filled c-icon--size-xl" js-sidebar-trigger="" material-symbol="menu" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6629894dd7b75">
</span>
</div>
<div class="c-navbar__logo">
<a href="/">
<!-- image.blade.php -->
<figure class="c-image c-image--type-svg" data-uid="6629894dd7bb7">
<img src="/assets/img/logotype.svg" alt="A logo" class="c-image__image" />
</figure>
</a>
</div>
<div class="c-navbar__list">
<a
href="#"
aria-label="About"
item-ancestor=""
item-active=""
item-has-children=""
item-children-async=""
>
<div class="c-navbar__item">
<span>About</span>
</div>
</a>
<a
href="#"
aria-label="Stuff"
item-ancestor=""
item-active=""
item-has-children=""
item-children-async=""
>
<div class="c-navbar__item">
<span>Stuff</span>
</div>
</a>
<a
href="#"
aria-label="More"
item-ancestor=""
item-active=""
item-has-children=""
item-children-async=""
>
<div class="c-navbar__item">
<span>More</span>
</div>
</a>
</div>
<div class="c-navbar__item c-navbar__expand">
<button class="c-button c-button__basic c-button__basic--default c-button--md" target="_top" js-toggle-trigger="navbar-content" type="button" aria-label="Meny" data-uid="6629894dd7c14">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="expand_more" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629894dd7c51">
</span>
</span>
<span class="c-button__label-text ">
Meny
</span>
</span> </button> </div>
<div class="c-navbar__content" js-toggle-item="navbar-content" js-toggle-class="u-height--auto">
<div class="c-navbar__expanded_main">
<a class="c-button c-navbar__prev c-button__basic c-button__basic--default c-button--lg" target="_top" type="button" href="#" aria-label="Hem" data-uid="6629894dd7d22">
<span class="c-button__label">
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--arrow-back c-icon--material c-icon--material-arrow_back material-symbols-outlined material-symbols-outlined--filled c-icon--size-lg" aria-hidden="true" material-symbol="arrow_back" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629894dd7d65">
</span>
</span>
<span class="c-button__label-text c-button__label-text--reverse">
Hem
</span>
</span> </a>
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography u-margin__top--8 c-typography__variant--h2" data-uid="6629894dd7da7">
Bidrag och Underhåll
</h2>
</div> </div>
</nav>@navbar([
'logo' => '/assets/img/logotype.svg',
'items' => [
"about" => [
"label" => "About",
"href" => "#",
"icon" => "people"
],
"stuff" => [
"label" => "Stuff",
"href" => "#",
"icon" => "people"
],
"more" => [
"label" => "More",
"href" => "#",
"icon" => "people"
]
],
'expanded_prev' => 'Hem',
'expanded_current' => 'Bidrag och Underhåll',
'expanded_menu' => [
"about" => [
"label" => "About",
"href" => "#",
"icon" => "people"
],
"stuff" => [
"label" => "Stuff",
"href" => "#",
"icon" => "people"
],
"more" => [
"label" => "More",
"href" => "#",
"icon" => "people"
]
],
'classList' => ['u-position--relative', 'c-navbar--border-bottom']
])
@endnavbarBlade component parameters
| Key | Default value | Type | Available values | Description |
| logo | string | - | A link to a logo | |
| items | [] | array | - | An array of links |
| sidebar | false | boolean | - | If set to true the toggle will toggle sidebar |
| expanded_menu | false | boolean | - | Data for expanded menu |
| isDynamic | false | boolean | - | - |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |