Dropdown

Click

Click to show the list of items. 

<div id="61efa2c921cac" class="c-dropdown c-dropdown-button--left c-dropdown-button--left__click c-dropdown--on-click">   
    
    <button id="61efa2c9214ab9.48804180" class="c-button c-button__filled c-button__filled--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efa2c9214bb">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Click
            </span>

            <span class="c-button__label-icon">
                <!-- icon.blade.php -->
    <i id="61efa2c921558" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa2c921551">
                    keyboard_arrow_down
            </i>
            </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="61efa2c922199" class="c-dropdown c-dropdown-button--left c-dropdown--on-hover">   
    
    <button id="61efa2c9220e27.58106840" class="c-button c-button__filled c-button__filled--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efa2c9220f2">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Hover
            </span>

            <span class="c-button__label-icon">
                <!-- icon.blade.php -->
    <i id="61efa2c922149" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa2c922145">
                    keyboard_arrow_down
            </i>
            </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="61efa2c9227ab" class="c-dropdown c-dropdown-button--left c-dropdown-button--left__click c-dropdown--on-click">   
    
    <button id="61efa2c9226e61.24902808" class="c-button c-button__filled c-button__filled--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efa2c9226f5">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text--reverse">
                Left
            </span>

            <span class="c-button__label-icon--reverse">
                <!-- icon.blade.php -->
    <i id="61efa2c92274a" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa2c922746">
                    keyboard_arrow_left
            </i>
            </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="61efa2c9228ca" class="c-dropdown c-dropdown-button--right c-dropdown-button--right__click c-dropdown--on-click">   
    
    <button id="61efa2c9228280.26426655" class="c-button c-button__filled c-button__filled--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efa2c922835">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Right
            </span>

            <span class="c-button__label-icon">
                <!-- icon.blade.php -->
    <i id="61efa2c922881" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa2c92287e">
                    keyboard_arrow_right
            </i>
            </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="61efa2c9229d4" class="c-dropdown c-dropdown-button--top c-dropdown-button--top__click c-dropdown--on-click">   
    
    <button id="61efa2c9229363.64394494" class="c-button c-button__filled c-button__filled--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efa2c922942">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Up
            </span>

            <span class="c-button__label-icon">
                <!-- icon.blade.php -->
    <i id="61efa2c92298c" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa2c922989">
                    keyboard_arrow_up
            </i>
            </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="61efa2c922adb" class="c-dropdown c-dropdown-button--down c-dropdown-button--down__click c-dropdown--on-click">   
    
    <button id="61efa2c922a3f6.06294147" class="c-button c-button__filled c-button__filled--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efa2c922a4b">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Down
            </span>

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