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
The navbar allows you to give the user quick access to top level pages
<!-- navbar.blade.php -->
<nav id="61efafae7bbe2" class="c-navbar u-position--relative c-navbar--border-top" data-uid="61efafae7bbd8">
<div class="c-navbar__toggle">
<!-- icon.blade.php -->
<i id="61efafae7bca0" class="c-icon c-icon--size-xl material-icons" js-sidebar-trigger="" translate="no" role="img" alt="" data-uid="61efafae7bc9b">
menu
</i>
</div>
<div class="c-navbar__logo">
<a href="/">
<!-- image.blade.php -->
<figure id="61efafae7bd3e" class="c-image" data-uid="61efafae7bd3a">
<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 id="61efafae7bdf34.10643933" class="c-button c-button__basic c-button__basic--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="navbar-content" type="button" aria-pressed="false" data-uid="61efafae7be0c">
<span class="c-button__label">
<span class="c-button__label-text">
Meny
</span>
<span class="c-button__label-icon">
<!-- icon.blade.php -->
<i id="61efafae7be8f" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efafae7be8a">
expand_more
</i>
</span>
</span>
</button> </div>
<div class="c-navbar__content" js-toggle-item="navbar-content" js-toggle-class="u-height--auto">
<div id="61efafae7c683" class="c-grid c-navbar__expanded_menu c-grid__container c-grid__container__gap__col--4 c-grid__container__gap__row--0" style="grid-template-columns: repeat(12, minmax(auto, max-content));" data-uid="61efafae7c67d">
<div id="61efafae7c4b9" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efafae7c4b4">
<a id="61efafae7c3b2" class="c-link" target="_top" href="#" role="link" data-uid="61efafae7c3ad">
<br />
<b>Notice</b>: Undefined index: title in <b>/tmp/blade-engine-cache/c3028f9de4e5275cacfe38e0d500ff9ef47985ea.php</b> on line <b>16</b><br />
</a>
</div> <div id="61efafae7c59b" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efafae7c598">
<a id="61efafae7c54b" class="c-link" target="_top" href="#" role="link" data-uid="61efafae7c546">
<br />
<b>Notice</b>: Undefined index: title in <b>/tmp/blade-engine-cache/c3028f9de4e5275cacfe38e0d500ff9ef47985ea.php</b> on line <b>16</b><br />
</a>
</div> <div id="61efafae7c633" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efafae7c630">
<a id="61efafae7c5ed" class="c-link" target="_top" href="#" role="link" data-uid="61efafae7c5e9">
<br />
<b>Notice</b>: Undefined index: title in <b>/tmp/blade-engine-cache/c3028f9de4e5275cacfe38e0d500ff9ef47985ea.php</b> on line <b>16</b><br />
</a>
</div>
</div> <div class="c-navbar__expanded_main">
<a id="61efafae7ca0d0.63392962" class="c-button c-navbar__prev c-button__basic c-button__basic--default c-button--lg ripple ripple--before" href="#" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="61efafae7ca1e">
<span class="c-button__label">
<span class="c-button__label-text--reverse">
Hem
</span>
<span class="c-button__label-icon--reverse">
<!-- icon.blade.php -->
<i id="61efafae7ca91" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efafae7ca8d">
arrow_back
</i>
</span>
</span>
</a>
<!-- typography.blade.php -->
<h2 id="61efafae7cb31" class="c-typography u-margin__top--8 c-typography__variant--marketing" data-uid="61efafae7cb2d">
Bidrag och Underhåll
</h2>
<div id="61efafae7d32e" class="c-grid c-navbar__expanded_grid c-grid__container c-grid__container__gap__col--5 c-grid__container__gap__row--9" style="grid-template-columns: repeat(auto-fill, minmax(auto, 340px));" data-uid="61efafae7d32a">
<a id="61efafae7d136" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="61efafae7d132">
<!-- typography.blade.php -->
<h2 id="61efafae7d061" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="61efafae7d05c">
1
</h2>
<!-- typography.blade.php -->
<p id="61efafae7d0d0" class="c-typography c-typography__variant--body" data-uid="61efafae7d0cd">
No Preview Available
</p>
</a>
<a id="61efafae7d215" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="61efafae7d212">
<!-- typography.blade.php -->
<h2 id="61efafae7d18b" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="61efafae7d188">
1
</h2>
<!-- typography.blade.php -->
<p id="61efafae7d1d0" class="c-typography c-typography__variant--body" data-uid="61efafae7d1cd">
No Preview Available
</p>
</a>
<a id="61efafae7d2e5" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="61efafae7d2e2">
<!-- typography.blade.php -->
<h2 id="61efafae7d260" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="61efafae7d25d">
1
</h2>
<!-- typography.blade.php -->
<p id="61efafae7d2a2" class="c-typography c-typography__variant--body" data-uid="61efafae7d2a0">
No Preview Available
</p>
</a>
</div></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
The navbar allows you to give the user quick access to top level pages
<!-- navbar.blade.php -->
<nav id="61efafae7d665" class="c-navbar u-position--relative c-navbar--border-bottom" data-uid="61efafae7d661">
<div class="c-navbar__toggle">
<!-- icon.blade.php -->
<i id="61efafae7d6b6" class="c-icon c-icon--size-xl material-icons" js-sidebar-trigger="" translate="no" role="img" alt="" data-uid="61efafae7d6b1">
menu
</i>
</div>
<div class="c-navbar__logo">
<a href="/">
<!-- image.blade.php -->
<figure id="61efafae7d716" class="c-image" data-uid="61efafae7d700">
<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 id="61efafae7d7742.63444212" class="c-button c-button__basic c-button__basic--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="navbar-content" type="button" aria-pressed="false" data-uid="61efafae7d782">
<span class="c-button__label">
<span class="c-button__label-text">
Meny
</span>
<span class="c-button__label-icon">
<!-- icon.blade.php -->
<i id="61efafae7d7d4" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efafae7d7d0">
expand_more
</i>
</span>
</span>
</button> </div>
<div class="c-navbar__content" js-toggle-item="navbar-content" js-toggle-class="u-height--auto">
<div id="61efafae7dbc4" class="c-grid c-navbar__expanded_menu c-grid__container c-grid__container__gap__col--4 c-grid__container__gap__row--0" style="grid-template-columns: repeat(12, minmax(auto, max-content));" data-uid="61efafae7dbc0">
<div id="61efafae7da37" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efafae7da31">
<a id="61efafae7d88b" class="c-link" target="_top" href="#" role="link" data-uid="61efafae7d887">
<br />
<b>Notice</b>: Undefined index: title in <b>/tmp/blade-engine-cache/c3028f9de4e5275cacfe38e0d500ff9ef47985ea.php</b> on line <b>16</b><br />
</a>
</div> <div id="61efafae7daee" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efafae7daeb">
<a id="61efafae7daa5" class="c-link" target="_top" href="#" role="link" data-uid="61efafae7daa1">
<br />
<b>Notice</b>: Undefined index: title in <b>/tmp/blade-engine-cache/c3028f9de4e5275cacfe38e0d500ff9ef47985ea.php</b> on line <b>16</b><br />
</a>
</div> <div id="61efafae7db7c" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efafae7db7a">
<a id="61efafae7db3b" class="c-link" target="_top" href="#" role="link" data-uid="61efafae7db38">
<br />
<b>Notice</b>: Undefined index: title in <b>/tmp/blade-engine-cache/c3028f9de4e5275cacfe38e0d500ff9ef47985ea.php</b> on line <b>16</b><br />
</a>
</div>
</div> <div class="c-navbar__expanded_main">
<a id="61efafae7dc5e0.80954663" class="c-button c-navbar__prev c-button__basic c-button__basic--default c-button--lg ripple ripple--before" href="#" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="61efafae7dc6d">
<span class="c-button__label">
<span class="c-button__label-text--reverse">
Hem
</span>
<span class="c-button__label-icon--reverse">
<!-- icon.blade.php -->
<i id="61efafae7dcbf" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efafae7dcbb">
arrow_back
</i>
</span>
</span>
</a>
<!-- typography.blade.php -->
<h2 id="61efafae7dd0e" class="c-typography u-margin__top--8 c-typography__variant--marketing" data-uid="61efafae7dd0b">
Bidrag och Underhåll
</h2>
<div id="61efafae7e04f" class="c-grid c-navbar__expanded_grid c-grid__container c-grid__container__gap__col--5 c-grid__container__gap__row--9" style="grid-template-columns: repeat(auto-fill, minmax(auto, 340px));" data-uid="61efafae7e04b">
<a id="61efafae7de60" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="61efafae7de5d">
<!-- typography.blade.php -->
<h2 id="61efafae7ddbd" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="61efafae7ddba">
1
</h2>
<!-- typography.blade.php -->
<p id="61efafae7de04" class="c-typography c-typography__variant--body" data-uid="61efafae7de02">
No Preview Available
</p>
</a>
<a id="61efafae7df36" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="61efafae7df33">
<!-- typography.blade.php -->
<h2 id="61efafae7deab" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="61efafae7dea8">
1
</h2>
<!-- typography.blade.php -->
<p id="61efafae7def0" class="c-typography c-typography__variant--body" data-uid="61efafae7deed">
No Preview Available
</p>
</a>
<a id="61efafae7e007" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="61efafae7e004">
<!-- typography.blade.php -->
<h2 id="61efafae7df84" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="61efafae7df82">
1
</h2>
<!-- typography.blade.php -->
<p id="61efafae7dfc5" class="c-typography c-typography__variant--body" data-uid="61efafae7dfc3">
No Preview Available
</p>
</a>
</div></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. |