Floating Action Button

FAB

Note: We've removed the placement of the buttons to prevent issues with documentation. Remove the values from the classList to get the intended layout.

<div id="62bedb33303a0" class="c-fab c-fab__bottom-right" data-uid="62bedb333039b">
    <div js-toggle-item="panel-id-62bedb333038e" js-toggle-class="c-fab__panel--open" class="c-fab__panel">

                    <!-- typography.blade.php  -->
<p id="62bedb3330782" class="c-typography c-fab__heading c-typography__variant--h6" data-uid="62bedb333077e">
    Vestibulum id ligula porta felis euismod semper
</p>        
        <!-- nav.blade.php -->
 
    <ul id="62bedb332faad" class="c-nav c-nav--tiles c-nav--depth-0 unlist c-nav--vertical" aria-orientation="vertical" data-uid="62bedb332faa4" role="menu">
                    <li 
                id="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-0__item" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-0__label"
            >

                                    <a  id="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete" 
                    >
                                                <span class="c-nav__text">Arbete</span>
                    </a>
                                
                                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="62bedb332ff03" class="c-nav c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" data-uid="62bedb332fefd" role="menu">
                    <li 
                id="62bedb332ff03-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-0__item" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="62bedb332ff03-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-0__label"
            >

                                    <a  id="62bedb332ff03-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Child 1 with a long name" 
                    >
                                                <span class="c-nav__text">Arbete - Child 1 with a long name</span>
                    </a>
                                
                                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="62bedb332ff6c" class="c-nav c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" data-uid="62bedb332ff69" role="menu">
                    <li 
                id="62bedb332ff6c-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-0__item" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="62bedb332ff6c-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-0__label"
            >

                                    <a  id="62bedb332ff6c-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Granchild 1" 
                    >
                                                <span class="c-nav__text">Arbete - Granchild 1</span>
                    </a>
                                
                                    
                                                </li>
                    <li 
                id="62bedb332ff6c-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-1__item" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="62bedb332ff6c-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-1__label"
            >

                                    <a  id="62bedb332ff6c-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Granchild 2" 
                    >
                                                <span class="c-nav__text">Arbete - Granchild 2</span>
                    </a>
                                
                                    
                                                </li>
            </ul>
                                                </li>
                    <li 
                id="62bedb332ff03-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-1__item" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="62bedb332ff03-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-1__label"
            >

                                    <a  id="62bedb332ff03-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Child 2" 
                    >
                                                <span class="c-nav__text">Arbete - Child 2</span>
                    </a>
                                
                            </li>
            </ul>
                                                </li>
                    <li 
                id="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-1__item" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-1__label"
            >

                                    <a  id="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Bo, bygga och miljö" 
                    >
                                                <span class="c-nav__text">Bo, bygga och miljö</span>
                    </a>
                                
                                    
                                                </li>
                    <li 
                id="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-2__item" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-2__label"
            >

                                    <a  id="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-2__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Förskola och utbildning" 
                    >
                                                <span class="c-nav__text">Förskola och utbildning</span>
                    </a>
                                
                                    
                                                </li>
                    <li 
                id="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-3__item" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-3__label"
            >

                                    <a  id="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-3__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Kommun och politik" 
                    >
                                                <span class="c-nav__text">Kommun och politik</span>
                    </a>
                                
                                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="62bedb3330006" class="c-nav c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" data-uid="62bedb3330003" role="menu">
                    <li 
                id="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-0__item" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-0__label"
            >

                                    <a  id="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="About" 
                    >
                                                <span class="c-nav__text">About</span>
                    </a>
                                
                            </li>
                    <li 
                id="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-1__item" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-1__label"
            >

                                    <a  id="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Contact" 
                    >
                                                <span class="c-nav__text">Contact</span>
                    </a>
                                
                            </li>
                    <li 
                id="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-2__item" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-2__label"
            >

                                    <a  id="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-2__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Links" 
                    >
                                                <span class="c-nav__text">Links</span>
                    </a>
                                
                            </li>
                    <li 
                id="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-3__item" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-3__label"
            >

                                    <a  id="62bedb3330006-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-3__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="More info" 
                    >
                                                <span class="c-nav__text">More info</span>
                    </a>
                                
                            </li>
            </ul>
                                                </li>
                    <li 
                id="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
-4__item" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>12</b><br />
-4__label"
            >

                                    <a  id="62bedb332faad-<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>33</b><br />
-4__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Omsorg och stöd" 
                    >
                                                <span class="c-nav__text">Omsorg och stöd</span>
                    </a>
                                
                                    
                                                </li>
            </ul>

    </div>

            <button id="62bedb333086b" class="c-button c-button__filled c-button__filled--primary c-button--md" href="" target="_top" js-toggle-trigger="panel-id-62bedb333038e" type="button" aria-pressed="false" data-uid="62bedb3330864">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon c-button__label-icon--reverse">
                <!-- icon.blade.php -->
    <i id="62bedb3330950" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bedb333094a">
                    apps
            </i>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Open menu
            </span>
        
    </span>
</button>    </div>
@fab([
    'position' => 'bottom-right',
    'heading' => "Vestibulum id ligula porta felis euismod semper",
    'button' => [
        'icon' => 'apps',
        'size' => 'md',
        'color' => 'primary',
        'text' => 'Open menu',
        'reversePositions' => true,
    ],
    'classList' => []
])

    @nav([
        'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
        'direction' => 'vertical',
        'includeToggle' => false,
        'classList' => ['c-nav--tiles']
    ])
    @endnav

@endfab

Blade component parameters

Key Default value Type Available values Description
position bottom-right string - Where on the screen the FAB should be positioned
heading Samlade länkar för elever och föräldrar string - Heading text for panel
button false boolean - Settings for the button element (trigger)
slot string - Contents of popup panel
closeLabel false boolean - The label to indicate closing action
closeIcon false boolean - The icon to indicate closing action
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/Fab/fab.json