Dropdown
BS4 theme dropdown is an enhancement of
BS Dropdown
.
Getting started
To use BS4 dropdown simply include bs4 theme in your bundle file
//= require vendor/bootstrap-4.4.1-iplan-theme.bundleResponsive dropdown
BS4 theme responsive dropdown is a BS4 dropdown that uses CSS and JS to automatically switches to a bottom popup style dropdown on mobile screens.
To use it, just add
.dropdown-responsive
to
.dropdown
.row.row-gap-3
.col-24.col-lg-auto
.dropdown
=button_tag 'Non responsive dropdown', type: :button, class: 'btn btn-light dropdown-toggle', 'data-toggle': "dropdown"
%ul.dropdown-menu
%li=link_to 'Option 1', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 2', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 3', 'javascript:;', class: 'dropdown-item'
.col-24.col-lg-auto
.dropdown.dropdown-responsive
=button_tag 'Responsive dropdown', class: 'btn dropdown-toggle btn-light', type: 'button', 'data-toggle': 'dropdown'
%ul.dropdown-menu
%li=link_to 'Option 1', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 2', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 3', 'javascript:;', class: 'dropdown-item'
.col-24.col-lg-auto
.dropdown.dropdown-responsive
=button_tag 'Responsive dropdown in modal', class: 'btn dropdown-toggle btn-light', type: 'button', 'data-toggle': 'dropdown'
%ul.dropdown-menu
%li=link_to 'Modal with responsive dropdown', 'javascript:;', class: 'dropdown-item', 'data-toggle': "modal", 'data-target': "#modal-with-responsive-dropdown"
%li=link_to 'Remote Modal with responsive dropdown', 'javascript:;', class: 'dropdown-item', 'data-toggle': "remote-modal", 'data-target': "#remote-modal-with-responsive-dropdown",'data-remote-modal-url': components_remote_modal_path(responsive_dropdown: 0)
.modal#modal-with-responsive-dropdown{tabindex: '-1'}
.modal-dialog
.modal-content
.modal-header
%h5.modal-title='Normal modal'
=button_tag class: 'close', 'data-dismiss': 'modal', type: 'button' do
%span ×
.modal-body
.dropdown.dropdown-responsive
=link_to 'Responsive Dropdown in modal', 'javascript:;', class: 'btn dropdown-toggle btn-light', type: 'button', 'data-toggle': 'dropdown'
%ul.dropdown-menu
%li=button_tag 'Open first modal', class: 'dropdown-item', 'data-toggle': "modal", 'data-target': "#first-modal-from-responsive-dropdown", type: 'button'
%li=button_tag 'Open first stacked modal', class: 'dropdown-item', 'data-toggle': "modal", 'data-target': "#first-modal-from-responsive-dropdown", type: 'button', 'data-stack': 'modal'
%li=link_to 'Normal button', 'javascript:;', class: 'dropdown-item'
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
.dropdown.dropdown-responsive
=link_to 'Responsive Dropdown in modal', 'javascript:;', class: 'btn dropdown-toggle btn-light', type: 'button', 'data-toggle': 'dropdown'
%ul.dropdown-menu
%li=button_tag 'Open first modal', class: 'dropdown-item', 'data-toggle': "modal", 'data-target': "#first-modal-from-responsive-dropdown", type: 'button'
%li=button_tag 'Open first stacked modal', class: 'dropdown-item', 'data-toggle': "modal", 'data-target': "#first-modal-from-responsive-dropdown", type: 'button', 'data-stack': 'modal'
%li=link_to 'Normal button', 'javascript:;', class: 'dropdown-item'
.modal-footer
=button_tag 'close', type: 'button', class: 'btn-block btn btn-secondary', 'data-dismiss': "modal"
.modal#first-modal-from-responsive-dropdown{tabindex: '-1'}
.modal-dialog
.modal-content
.modal-header
%h5.modal-title='First modal from responsive dropdown'
=button_tag class: 'close', 'data-dismiss': 'modal', type: 'button' do
%span ×
.modal-body
.dropdown.dropdown-responsive
=link_to 'Responsive Dropdown in first modal', 'javascript:;', class: 'btn dropdown-toggle btn-light', type: 'button', 'data-toggle': 'dropdown'
%ul.dropdown-menu
%li=button_tag 'Open Second modal', class: 'dropdown-item', 'data-toggle': "modal", 'data-target': "#second-modal-from-responsive-dropdown", type: 'button'
%li=button_tag 'Open Second stacked modal', class: 'dropdown-item', 'data-toggle': "modal", 'data-target': "#second-modal-from-responsive-dropdown", type: 'button', 'data-stack': 'modal'
%li=link_to 'Normal button', 'javascript:;', class: 'dropdown-item'
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
%p.my-5 Text that creates scroll cause it long
.dropdown.dropdown-responsive
=link_to 'Responsive Dropdown in modal', 'javascript:;', class: 'btn dropdown-toggle btn-light', type: 'button', 'data-toggle': 'dropdown'
%ul.dropdown-menu
%li=button_tag 'Open Second modal', class: 'dropdown-item', 'data-toggle': "modal", 'data-target': "#second-modal-from-responsive-dropdown", type: 'button'
%li=button_tag 'Open Second stacked modal', class: 'dropdown-item', 'data-toggle': "modal", 'data-target': "#second-modal-from-responsive-dropdown", type: 'button', 'data-stack': 'modal'
%li=link_to 'Normal button', 'javascript:;', class: 'dropdown-item'
.modal-footer
=button_tag 'close', type: 'button', class: 'btn-block btn btn-secondary', 'data-dismiss': "modal"
.modal#second-modal-from-responsive-dropdown{tabindex: '-1'}
.modal-dialog
.modal-content
.modal-header
%h5.modal-title='Second Stacked modal from responsive dropdown'
=button_tag class: 'close', 'data-dismiss': 'modal', type: 'button' do
%span ×
.modal-body
this is second stacked modal
.modal-footer
=button_tag 'close', type: 'button', class: 'btn-block btn btn-secondary', 'data-dismiss': "modal"RTL
RTL is supported by adding
.dropdown-menu-right
automagically in conjunction with popper JS
Navbar
.row.row-gap-3{dir: 'rtl'}
.col-auto
.dropdown
=button_tag 'Regular dropdown', type: :button, class: 'btn btn-light dropdown-toggle', 'data-toggle': "dropdown"
%ul.dropdown-menu
%li=link_to 'Option 1', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 2', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 3', 'javascript:;', class: 'dropdown-item'
.col-auto
.dropdown
=button_tag 'Regular dropdown menu right', type: :button, class: 'btn btn-light dropdown-toggle', 'data-toggle': "dropdown"
%ul.dropdown-menu.dropdown-menu-right
%li=link_to 'Option 1', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 2', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 3', 'javascript:;', class: 'dropdown-item'
.col-auto
.dropdown
=button_tag 'Static dropdown', type: :button, class: 'btn btn-light dropdown-toggle', 'data-toggle': "dropdown", 'data-display': "static"
%ul.dropdown-menu
%li=link_to 'Option 1', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 2', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 3', 'javascript:;', class: 'dropdown-item'
.col-auto
.dropdown
=button_tag 'Static dropdown menu right', type: :button, class: 'btn btn-light dropdown-toggle', 'data-toggle': "dropdown", 'data-display': "static"
%ul.dropdown-menu.dropdown-menu-right
%li=link_to 'Option 1', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 2', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 3', 'javascript:;', class: 'dropdown-item'
.col-auto
.dropdown.dropdown-responsive
=button_tag 'Responsive dropdown', type: :button, class: 'btn btn-light dropdown-toggle', 'data-toggle': "dropdown"
%ul.dropdown-menu
%li=link_to 'Option 1', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 2', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 3', 'javascript:;', class: 'dropdown-item'
%hr
%h5 Navbar
.navbar.bg-light{dir: 'rtl'}
.dropdown
=button_tag 'Dropdown', type: :button, class: 'btn btn-light dropdown-toggle', 'data-toggle': "dropdown"
%ul.dropdown-menu
%li=link_to 'Option 1', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 2', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 3', 'javascript:;', class: 'dropdown-item'
.dropdown
=button_tag 'Dropdown menu right', type: :button, class: 'btn btn-light dropdown-toggle', 'data-toggle': "dropdown"
%ul.dropdown-menu.dropdown-menu-right
%li=link_to 'Option 1', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 2', 'javascript:;', class: 'dropdown-item'
%li=link_to 'Option 3', 'javascript:;', class: 'dropdown-item'
On this page