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. |