Dropdown
Click
<div id="" class="c-dropdown js-dropdown c-dropdown-button--left c-dropdown-button--left__click c-dropdown--on-click" data-uid="673ed2199a1ad">
<button class="c-button js-dropdown-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" aria-label="Click" data-uid="673ed2199a13c">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2199a16f">
</span>
</span>
<span class="c-button__label-text ">
Click
</span>
</span> </button>
<ul class="c-dropdown__list">
<li class="c-dropdown__item">
<a href="#" aria-label="cool"
>
cool
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="story"
>
story
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="bro"
>
bro
</a>
</li>
</ul>
</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',
'classList' => [
'js-dropdown-button'
]
])
@endbutton
@enddropdownHover
<div id="" class="c-dropdown js-dropdown c-dropdown-button--left c-dropdown--on-hover" data-uid="673ed2199a5f0">
<button class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" aria-label="Hover" data-uid="673ed2199a520">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2199a5b7">
</span>
</span>
<span class="c-button__label-text ">
Hover
</span>
</span> </button>
<ul class="c-dropdown__list">
<li class="c-dropdown__item">
<a href="#" aria-label="cool"
>
cool
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="story"
>
story
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="bro"
>
bro
</a>
</li>
</ul>
</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
@enddropdownDirection
<div id="" class="c-dropdown js-dropdown c-dropdown-button--left c-dropdown-button--left__click c-dropdown--on-click" data-uid="673ed2199a6bc">
<button class="c-button js-dropdown-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" aria-label="Left" data-uid="673ed2199a656">
<span class="c-button__label">
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2199a684">
</span>
</span>
<span class="c-button__label-text c-button__label-text--reverse">
Left
</span>
</span> </button>
<ul class="c-dropdown__list">
<li class="c-dropdown__item">
<a href="#" aria-label="cool"
>
cool
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="story"
>
story
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="bro"
>
bro
</a>
</li>
</ul>
</div>
<div id="" class="c-dropdown js-dropdown c-dropdown-button--right c-dropdown-button--right__click c-dropdown--on-click" data-uid="673ed2199a751">
<button class="c-button js-dropdown-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" aria-label="Right" data-uid="673ed2199a6f0">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2199a71b">
</span>
</span>
<span class="c-button__label-text ">
Right
</span>
</span> </button>
<ul class="c-dropdown__list">
<li class="c-dropdown__item">
<a href="#" aria-label="cool"
>
cool
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="story"
>
story
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="bro"
>
bro
</a>
</li>
</ul>
</div>
<div id="" class="c-dropdown js-dropdown c-dropdown-button--top c-dropdown-button--top__click c-dropdown--on-click" data-uid="673ed2199a7e4">
<button class="c-button js-dropdown-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" aria-label="Up" data-uid="673ed2199a784">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-up c-icon--material c-icon--material-keyboard_arrow_up material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="keyboard_arrow_up" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2199a7af">
</span>
</span>
<span class="c-button__label-text ">
Up
</span>
</span> </button>
<ul class="c-dropdown__list">
<li class="c-dropdown__item">
<a href="#" aria-label="cool"
>
cool
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="story"
>
story
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="bro"
>
bro
</a>
</li>
</ul>
</div>
<div id="" class="c-dropdown js-dropdown c-dropdown-button--down c-dropdown-button--down__click c-dropdown--on-click" data-uid="673ed2199a8a9">
<button class="c-button js-dropdown-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" aria-label="Down" data-uid="673ed2199a846">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2199a874">
</span>
</span>
<span class="c-button__label-text ">
Down
</span>
</span> </button>
<ul class="c-dropdown__list">
<li class="c-dropdown__item">
<a href="#" aria-label="cool"
>
cool
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="story"
>
story
</a>
</li>
<li class="c-dropdown__item">
<a href="#" aria-label="bro"
>
bro
</a>
</li>
</ul>
</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,
'classList' => [
'js-dropdown-button'
]
])
@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',
'classList' => [
'js-dropdown-button'
]
])
@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',
'classList' => [
'js-dropdown-button'
]
])
@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',
'classList' => [
'js-dropdown-button'
]
])
@endbutton
@enddropdownBlade 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. |
| popup | string | - | - | |
| 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. |