Dropdown

Click

Click to show the list of items. 

<div id="62bec67556b8b" class="c-dropdown c-dropdown-button--left c-dropdown-button--left__click c-dropdown--on-click">   
    
    <button id="62bec67556b04" class="c-button c-button__filled c-button__filled--default c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62bec67556aff">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec67556b50" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec67556b4d">
                    keyboard_arrow_down
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Click
            </span>
        
    </span>
</button>
    
    <div class="c-dropdown__list c-dropdown__list--left">
        <div>
            <ul>
                                <a href="#"><li>cool</li></a>
                                <a href="#"><li>story</li></a>
                                <a href="#"><li>bro</li></a>
                            </ul>
        </div>
    </div>  
    
</div>
@dropdown([
'items' => [ ['text' => 'cool', 'link' => '#'], ['text' => 'story', 'link' => '#'], ['text' => 'bro', 'link' => '#']],
'direction' => 'left',
'popup' => 'click'
])
    @button([
        'text' => 'Click',
        'icon' => 'keyboard_arrow_down',
        'size' => 'md'
        
    ])
    @endbutton
@enddropdown

Hover

Hover to show the list of items. 

<div id="62bec67556ee4" class="c-dropdown c-dropdown-button--left c-dropdown--on-hover">   
    
    <button id="62bec67556e6f" class="c-button c-button__filled c-button__filled--default c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62bec67556e6a">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec67556eac" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec67556ea8">
                    keyboard_arrow_down
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Hover
            </span>
        
    </span>
</button>
    
    <div class="c-dropdown__list c-dropdown__list--left">
        <div>
            <ul>
                                <a href="#"><li>cool</li></a>
                                <a href="#"><li>story</li></a>
                                <a href="#"><li>bro</li></a>
                            </ul>
        </div>
    </div>  
    
</div>
@dropdown([
'items' => [ ['text' => 'cool', 'link' => '#'], ['text' => 'story', 'link' => '#'], ['text' => 'bro', 'link' => '#']],
'direction' => 'left',
'popup' => 'hover'
])
    @button([
        'text' => 'Hover',
        'icon' => 'keyboard_arrow_down',
        'size' => 'md'
        
    ])
    @endbutton
@enddropdown

Direction

Choose the direction of the list. 

<div id="62bec67557341" class="c-dropdown c-dropdown-button--left c-dropdown-button--left__click c-dropdown--on-click">   
    
    <button id="62bec675572ad" class="c-button c-button__filled c-button__filled--default c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62bec675572a8">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon c-button__label-icon--reverse">
                <!-- icon.blade.php -->
    <i id="62bec675572f1" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec675572ee">
                    keyboard_arrow_left
            </i>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Left
            </span>
        
    </span>
</button>
    
    <div class="c-dropdown__list c-dropdown__list--left">
        <div>
            <ul>
                                <a href="#"><li>cool</li></a>
                                <a href="#"><li>story</li></a>
                                <a href="#"><li>bro</li></a>
                            </ul>
        </div>
    </div>  
    
</div>
<div id="62bec6755741e" class="c-dropdown c-dropdown-button--right c-dropdown-button--right__click c-dropdown--on-click">   
    
    <button id="62bec675573b1" class="c-button c-button__filled c-button__filled--default c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62bec675573ad">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec675573e7" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec675573e4">
                    keyboard_arrow_right
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Right
            </span>
        
    </span>
</button>
    
    <div class="c-dropdown__list c-dropdown__list--right">
        <div>
            <ul>
                                <a href="#"><li>cool</li></a>
                                <a href="#"><li>story</li></a>
                                <a href="#"><li>bro</li></a>
                            </ul>
        </div>
    </div>  
    
</div>

<div id="62bec675574ee" class="c-dropdown c-dropdown-button--top c-dropdown-button--top__click c-dropdown--on-click">   
    
    <button id="62bec67557484" class="c-button c-button__filled c-button__filled--default c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62bec67557481">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec675574b9" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec675574b6">
                    keyboard_arrow_up
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Up
            </span>
        
    </span>
</button>
    
    <div class="c-dropdown__list c-dropdown__list--top">
        <div>
            <ul>
                                <a href="#"><li>cool</li></a>
                                <a href="#"><li>story</li></a>
                                <a href="#"><li>bro</li></a>
                            </ul>
        </div>
    </div>  
    
</div>
<div id="62bec675575b9" class="c-dropdown c-dropdown-button--down c-dropdown-button--down__click c-dropdown--on-click">   
    
    <button id="62bec67557552" class="c-button c-button__filled c-button__filled--default c-button--md" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62bec6755754e">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec67557585" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec67557583">
                    keyboard_arrow_down
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Down
            </span>
        
    </span>
</button>
    
    <div class="c-dropdown__list c-dropdown__list--down">
        <div>
            <ul>
                                <a href="#"><li>cool</li></a>
                                <a href="#"><li>story</li></a>
                                <a href="#"><li>bro</li></a>
                            </ul>
        </div>
    </div>  
    
</div>
@dropdown([
'items' => [ ['text' => 'cool', 'link' => '#'], ['text' => 'story', 'link' => '#'], ['text' => 'bro', 'link' => '#']],
'direction' => 'left',
'popup' => 'click'
])
    @button([
        'text' => 'Left',
        'icon' => 'keyboard_arrow_left',
        'size' => 'md',
        'reversePositions' => true
        
    ])
    @endbutton
@enddropdown

@dropdown([
'items' => [ ['text' => 'cool', 'link' => '#'], ['text' => 'story', 'link' => '#'], ['text' => 'bro', 'link' => '#']],
'direction' => 'right',
'popup' => 'click'
])
    @button([
        'text' => 'Right',
        'icon' => 'keyboard_arrow_right',
        'size' => 'md'
        
    ])
    @endbutton
@enddropdown


@dropdown([
'items' => [ ['text' => 'cool', 'link' => '#'], ['text' => 'story', 'link' => '#'], ['text' => 'bro', 'link' => '#']],
'direction' => 'top',
'popup' => 'click'
])
    @button([
        'text' => 'Up',
        'icon' => 'keyboard_arrow_up',
        'size' => 'md'
        
    ])
    @endbutton
@enddropdown

@dropdown([
'items' => [ ['text' => 'cool', 'link' => '#'], ['text' => 'story', 'link' => '#'], ['text' => 'bro', 'link' => '#']],
'direction' => 'down',
'popup' => 'click'
])
    @button([
        'text' => 'Down',
        'icon' => 'keyboard_arrow_down',
        'size' => 'md'
        
    ])
    @endbutton
@enddropdown

Blade component parameters

Key Default value Type Available values Description
items [] array - An array of arrays representing each item with a name and a link.
href # string - Where should the button link to?
componentElement div string - The tag to use for this component.
itemElement a string - The tag to use for each list item.
direction bottom string - The direction in which the popup-menu opens in.
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/Dropdown/dropdown.json