@extends('layouts.master') @section('title') @lang('translation.Dropdowns') @endsection @section('content') @component('common-components.breadcrumb') @slot('pagetitle') UI Elements @endslot @slot('title') Dropdowns @endslot @endcomponent
Any single .btn
can be turned into a dropdown
toggle with some markup changes. Here’s how you can put them to work
with either <button>
elements:
The best part is you can do this with any button variant, too:
The best part is you can do this with any button variant, too:
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Add .dropdown-menu-end
to a .dropdown-menu
to right
align the dropdown menu.
By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose
option to change this behavior of the dropdown.
Example of dropdown menu Headers, Text, Forms content
Opt into darker dropdowns to match a dark navbar or custom style by adding .dropdown-menu-dark
onto an existing .dropdown-menu
. No changes are required to the dropdown items.
Trigger dropdown menus above elements
by adding .dropup
to the parent
element.
Trigger dropdown menus at the right of the elements by adding .dropstart
to the parent element.
Trigger dropdown menus at the right of the elements by adding .dropend
to the parent element.