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="61efba7cb8e4a" class="c-fab c-fab__bottom-right" data-uid="61efba7cb8e46">
    <div js-toggle-item="panel-id-61efba7cb8e3c" js-toggle-class="c-fab__panel--open" class="c-fab__panel">

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

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

                                    <a  id="61efba7cb8b58-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="61efba7cb8bb6" class="c-nav c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" data-uid="61efba7cb8bb3" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efba7cb8bb6-0__label"
            >

                                    <a  id="61efba7cb8bb6-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="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efba7cb8bb6-1__label"
            >

                                    <a  id="61efba7cb8bb6-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="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efba7cb8b58-1__label"
            >

                                    <a  id="61efba7cb8b58-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="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efba7cb8883-1__label"
            >

                                    <a  id="61efba7cb8883-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="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efba7cb8883-2__label"
            >

                                    <a  id="61efba7cb8883-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="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="61efba7cb8883-3__label"
            >

                                    <a  id="61efba7cb8883-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="61efba7cb8c4c" class="c-nav c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" data-uid="61efba7cb8c49" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efba7cb8c4c-0__label"
            >

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

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

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

                                    <a  id="61efba7cb8c4c-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="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efba7cb8883-4__label"
            >

                                    <a  id="61efba7cb8883-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="61efba7cb91d04.99438912" class="c-button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="panel-id-61efba7cb8e3c" type="button" aria-pressed="false" data-uid="61efba7cb91e3">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text--reverse">
                Open menu
            </span>

            <span class="c-button__label-icon--reverse">
                <!-- icon.blade.php -->
    <i id="61efba7cb9276" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efba7cb9271">
                    apps
            </i>
            </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