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="62bed1ac71140" class="c-navbar u-position--relative c-navbar--border-top" data-uid="62bed1ac71138">
    <div class="c-navbar__toggle">
        <!-- icon.blade.php -->
    <i id="62bed1ac71208" class="c-icon c-icon--size-xl material-icons" js-sidebar-trigger="" translate="no" role="img" alt="" data-uid="62bed1ac71202">
                    menu
            </i>
    </div>

    
    <div class="c-navbar__logo">
        <a href="/">
            <!-- image.blade.php -->
<figure id="62bed1ac712b7" class="c-image c-image--type-svg" data-uid="62bed1ac712b3">
     
        <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="62bed1ac7137d" class="c-button c-button__basic c-button__basic--default c-button--md" href="" target="_top" js-toggle-trigger="navbar-content" type="button" aria-pressed="false" data-uid="62bed1ac71378">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bed1ac713e1" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed1ac713dc">
                    expand_more
            </i>
            </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 id="62bed1ac71a51" 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="62bed1ac71a4b">
    <div id="62bed1ac718d6" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62bed1ac718d2">
    <a id="62bed1ac7181f" class="c-link" target="_top" href="#" role="link" data-uid="62bed1ac71819">
        <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="62bed1ac71986" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62bed1ac71983">
    <a id="62bed1ac71943" class="c-link" target="_top" href="#" role="link" data-uid="62bed1ac7193f">
        <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="62bed1ac71a0b" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62bed1ac71a09">
    <a id="62bed1ac719cf" class="c-link" target="_top" href="#" role="link" data-uid="62bed1ac719cb">
        <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="62bed1ac71e75" class="c-button c-navbar__prev c-button__basic c-button__basic--default c-button--lg" href="#" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62bed1ac71e6f">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon c-button__label-icon--reverse">
                <!-- icon.blade.php -->
    <i id="62bed1ac71ede" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bed1ac71eda">
                    arrow_back
            </i>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Hem
            </span>
        
    </span>
</a>        
    <!-- typography.blade.php  -->
<h2 id="62bed1ac71f92" class="c-typography u-margin__top--8 c-typography__variant--marketing" data-uid="62bed1ac71f8d">
    Bidrag och Underhåll
</h2>
    <div id="62bed1ac724f2" 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="62bed1ac724ee">
    <a id="62bed1ac7235e" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="62bed1ac7235b">
    <!-- typography.blade.php  -->
<h2 id="62bed1ac722dc" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="62bed1ac722d8">
    1
</h2>
            <!-- typography.blade.php  -->
<p id="62bed1ac72316" class="c-typography c-typography__variant--body" data-uid="62bed1ac72313">
    No Preview Available
</p>
</a>            
        <a id="62bed1ac723fb" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="62bed1ac723f9">
    <!-- typography.blade.php  -->
<h2 id="62bed1ac7239c" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="62bed1ac72399">
    1
</h2>
            <!-- typography.blade.php  -->
<p id="62bed1ac723cc" class="c-typography c-typography__variant--body" data-uid="62bed1ac723ca">
    No Preview Available
</p>
</a>            
        <a id="62bed1ac724a4" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="62bed1ac724a1">
    <!-- typography.blade.php  -->
<h2 id="62bed1ac72431" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="62bed1ac7242f">
    1
</h2>
            <!-- typography.blade.php  -->
<p id="62bed1ac72473" class="c-typography c-typography__variant--body" data-uid="62bed1ac72471">
    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']
])
@endnavbar

Navbar 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="62bed1ac72760" class="c-navbar u-position--relative c-navbar--border-bottom" data-uid="62bed1ac7275c">
    <div class="c-navbar__toggle">
        <!-- icon.blade.php -->
    <i id="62bed1ac7279d" class="c-icon c-icon--size-xl material-icons" js-sidebar-trigger="" translate="no" role="img" alt="" data-uid="62bed1ac7279a">
                    menu
            </i>
    </div>

    
    <div class="c-navbar__logo">
        <a href="/">
            <!-- image.blade.php -->
<figure id="62bed1ac72805" class="c-image c-image--type-svg" data-uid="62bed1ac72800">
     
        <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="62bed1ac72870" class="c-button c-button__basic c-button__basic--default c-button--md" href="" target="_top" js-toggle-trigger="navbar-content" type="button" aria-pressed="false" data-uid="62bed1ac7286c">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bed1ac728a9" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed1ac728a6">
                    expand_more
            </i>
            </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 id="62bed1ac72a79" 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="62bed1ac72a76">
    <div id="62bed1ac72978" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62bed1ac72975">
    <a id="62bed1ac72941" class="c-link" target="_top" href="#" role="link" data-uid="62bed1ac7293d">
        <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="62bed1ac729e0" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62bed1ac729de">
    <a id="62bed1ac729b1" class="c-link" target="_top" href="#" role="link" data-uid="62bed1ac729ae">
        <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="62bed1ac72a46" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62bed1ac72a44">
    <a id="62bed1ac72a17" class="c-link" target="_top" href="#" role="link" data-uid="62bed1ac72a14">
        <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="62bed1ac72b10" class="c-button c-navbar__prev c-button__basic c-button__basic--default c-button--lg" href="#" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62bed1ac72b09">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon c-button__label-icon--reverse">
                <!-- icon.blade.php -->
    <i id="62bed1ac72b73" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bed1ac72b6e">
                    arrow_back
            </i>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Hem
            </span>
        
    </span>
</a>        
    <!-- typography.blade.php  -->
<h2 id="62bed1ac72bc6" class="c-typography u-margin__top--8 c-typography__variant--marketing" data-uid="62bed1ac72bc2">
    Bidrag och Underhåll
</h2>
    <div id="62bed1ac72f65" 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="62bed1ac72f5f">
    <a id="62bed1ac72d2f" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="62bed1ac72d2b">
    <!-- typography.blade.php  -->
<h2 id="62bed1ac72c95" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="62bed1ac72c91">
    1
</h2>
            <!-- typography.blade.php  -->
<p id="62bed1ac72ce4" class="c-typography c-typography__variant--body" data-uid="62bed1ac72ce1">
    No Preview Available
</p>
</a>            
        <a id="62bed1ac72e1e" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="62bed1ac72e1a">
    <!-- typography.blade.php  -->
<h2 id="62bed1ac72d86" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="62bed1ac72d82">
    1
</h2>
            <!-- typography.blade.php  -->
<p id="62bed1ac72dd2" class="c-typography c-typography__variant--body" data-uid="62bed1ac72dce">
    No Preview Available
</p>
</a>            
        <a id="62bed1ac72f0f" class="c-grid u-margin__y--4 c-grid__container__gap__col--0 c-grid__container__gap__row--0" href="#" data-uid="62bed1ac72f0b">
    <!-- typography.blade.php  -->
<h2 id="62bed1ac72e72" class="c-typography c-navbar__title c-typography__variant--h2" data-uid="62bed1ac72e6f">
    1
</h2>
            <!-- typography.blade.php  -->
<p id="62bed1ac72ebd" class="c-typography c-typography__variant--body" data-uid="62bed1ac72eb9">
    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']
])
@endnavbar

Blade 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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Navbar/navbar.json