Dropdowns

Full

The dropdown is used to perform grouped actions related to content near it. This example includes different components within the dropdown menu including a dropdown header, dropdown item, and dropdown divider.

Dropdown Header
Dropdown Item - Default Dropdown Item - Active Dropdown Item - Disabled
Delete 
= ui.nfg :dropdown do
  = ui.nfg :dropdown_toggle, body: 'Dropdown'
  = ui.nfg :dropdown_menu do
    = ui.nfg :dropdown_header, heading: 'Dropdown Header'
    = ui.nfg :dropdown_item, body: 'Dropdown Item - Default', icon: 'rocket', href: '#'
    = ui.nfg :dropdown_item, body: 'Dropdown Item - Active', icon: 'rocket', href: '#', active: true
    = ui.nfg :dropdown_item, body: 'Dropdown Item - Disabled', icon: 'ban', disabled: true
    = ui.nfg :dropdown_divider
    = ui.nfg :dropdown_item, :danger, body: 'Delete', href: '#', icon: 'trash-o', method: :delete
<div class="dropdown"><button class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Dropdown<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
  <div class="dropdown-menu">
    <h6 class="dropdown-header">Dropdown Header</h6>
    <a class="dropdown-item" href="#"><i aria-hidden="true" class="fa fa-rocket fa-fw text-center mr-1"></i> Dropdown Item - Default</a><a class="dropdown-item active" href="#"><i aria-hidden="true" class="fa fa-rocket fa-fw text-center mr-1"></i> Dropdown Item - Active</a><a class="dropdown-item disabled" tabindex="-1"><i aria-hidden="true" class="fa fa-ban fa-fw text-center mr-1"></i> Dropdown Item - Disabled</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item text-danger" data-method="delete" href="#"><i aria-hidden="true" class="fa fa-trash-o fa-fw text-center mr-1"></i> Delete</a></div>
</div>
Variants
Thematic

There are multiple options for adding colors to dropdown buttons. Add a trait to the dropdown_toggle to apply the color.

Dropdown Item 1 Dropdown Item 2
Dropdown Item 1 Dropdown Item 2 
= ui.nfg :dropdown do
  = ui.nfg :dropdown_toggle, :secondary, body: 'Secondary Theme'
  = ui.nfg :dropdown_menu do
    = ui.nfg :dropdown_item, body: 'Dropdown Item 1'
    = ui.nfg :dropdown_item, body: 'Dropdown Item 2'
= ui.nfg :dropdown, class: 'mt-2' do
  = ui.nfg :dropdown_toggle, :success, body: 'Success Theme'
  = ui.nfg :dropdown_menu do
    = ui.nfg :dropdown_item, body: 'Dropdown Item 1'
    = ui.nfg :dropdown_item, body: 'Dropdown Item 2'
<div class="dropdown"><button class="btn dropdown-toggle btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Secondary Theme<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
  <div class="dropdown-menu"><a class="dropdown-item">Dropdown Item 1</a><a class="dropdown-item">Dropdown Item 2</a></div>
</div>
<div class="dropdown mt-2"><button class="btn dropdown-toggle btn-success" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Success Theme<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
  <div class="dropdown-menu"><a class="dropdown-item">Dropdown Item 1</a><a class="dropdown-item">Dropdown Item 2</a></div>
</div>
Split Buttons

To use two buttons side by side with one having a dropdown, use the :split trait on the dropdown_toggle. Note: according to docs, you do not need to wrap the component in a dropdown menu.

Edit
Dropdown Item 1 Dropdown Item 2 
= ui.nfg :button_group do
  = ui.nfg :button, theme: :secondary, body: 'Edit', href: '#test'
  = ui.nfg :dropdown_toggle, :split, :secondary, icon: 'caret-down'
  = ui.nfg :dropdown_menu, right: true do
    = ui.nfg :dropdown_item, body: 'Dropdown Item 1'
    = ui.nfg :dropdown_item, body: 'Dropdown Item 2'
<div class="btn-group" role="group" aria-label="action buttons"><a class="btn btn-secondary" href="#test">Edit</a><button class="btn dropdown-toggle dropdown-toggle-split btn-secondary" data-toggle="dropdown" split="true" aria-haspopup="true" aria-expanded="false" type="button"><i aria-hidden="true" class="fa fa-caret-down"></i></button>
  <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item">Dropdown Item 1</a><a class="dropdown-item">Dropdown Item 2</a></div>
</div>
Sizing

There are three sizes for dropdown buttons: small, medium (default), and large. Large is typically used for the primary action on pages or modals. Small is typically used for contextual help (ex: expand/collapse). Medium is used everywhere else.

Dropdown Item 1 Dropdown Item 2
Dropdown Item 1 Dropdown Item 2 
= ui.nfg :dropdown do
  = ui.nfg :dropdown_toggle, :secondary, :lg, body: 'Large Toggle'
  = ui.nfg :dropdown_menu do
    = ui.nfg :dropdown_item, body: 'Dropdown Item 1'
    = ui.nfg :dropdown_item, body: 'Dropdown Item 2'
= ui.nfg :dropdown, class: 'mt-2' do
  = ui.nfg :dropdown_toggle, :secondary, :sm, body: 'Small Toggle'
  = ui.nfg :dropdown_menu do
    = ui.nfg :dropdown_item, body: 'Dropdown Item 1'
    = ui.nfg :dropdown_item, body: 'Dropdown Item 2'
<div class="dropdown"><button class="btn dropdown-toggle btn-lg btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Large Toggle<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
  <div class="dropdown-menu"><a class="dropdown-item">Dropdown Item 1</a><a class="dropdown-item">Dropdown Item 2</a></div>
</div>
<div class="dropdown mt-2"><button class="btn dropdown-toggle btn-sm btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Small Toggle<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
  <div class="dropdown-menu"><a class="dropdown-item">Dropdown Item 1</a><a class="dropdown-item">Dropdown Item 2</a></div>
</div>
States
Disabled

Some dropdowns need to be displayed disabled on load until an action is performed or something is unlocked.

Dropdown Item 1 Dropdown Item 2 
= ui.nfg :dropdown do
  = ui.nfg :dropdown_toggle, :secondary, body: 'Disabled', disabled: true, tooltip: 'Disabled'
  = ui.nfg :dropdown_menu do
    = ui.nfg :dropdown_item, body: 'Dropdown Item 1'
    = ui.nfg :dropdown_item, body: 'Dropdown Item 2'
<div class="dropdown"><span data-toggle="tooltip" data-placement="top" data-html="true" title="Disabled" class="d-inline-block" tabindex="0"><button class="btn dropdown-toggle btn-secondary" data-toggle="dropdown" disabled="disabled" aria-haspopup="true" aria-expanded="false" tabindex="-1" type="button" style="pointer-events: none;">Disabled<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button></span>
  <div class="dropdown-menu"><a class="dropdown-item">Dropdown Item 1</a><a class="dropdown-item">Dropdown Item 2</a></div>
</div>
Miscellaneous
Dropdown Menu Sizes

There are three sizes for dropdown menus: small, medium, and large. Small is the default. We use larger ones for more complex actions like filters inside of DM.

Dropdown Item 1 Dropdown Item 2
Dropdown Item 1 Dropdown Item 2 
= ui.nfg :dropdown do
  = ui.nfg :dropdown_toggle, body: 'Medium Menu'
  = ui.nfg :dropdown_menu, class: 'dropdown-menu-md' do
    = ui.nfg :dropdown_item, body: 'Dropdown Item 1'
    = ui.nfg :dropdown_item, body: 'Dropdown Item 2'

= ui.nfg :dropdown do
  = ui.nfg :dropdown_toggle, body: 'Large Menu'
  = ui.nfg :dropdown_menu, class: 'dropdown-menu-lg' do
    = ui.nfg :dropdown_item, body: 'Dropdown Item 1'
    = ui.nfg :dropdown_item, body: 'Dropdown Item 2'
<div class="dropdown"><button class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Medium Menu<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
  <div class="dropdown-menu dropdown-menu-md"><a class="dropdown-item">Dropdown Item 1</a><a class="dropdown-item">Dropdown Item 2</a></div>
</div>
<div class="dropdown"><button class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Large Menu<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
  <div class="dropdown-menu dropdown-menu-lg"><a class="dropdown-item">Dropdown Item 1</a><a class="dropdown-item">Dropdown Item 2</a></div>
</div>
Flip False

Use this option when needing to always open the dropdown to the bottom. An example application is when the device window is too small for a dropdown with a lot of items and it, by default, opens upwards thus cutting off the top dropdown items. Add it to the dropdown_toggle component.

Dropdown Item 1 Dropdown Item 2 
= ui.nfg :dropdown do
  = ui.nfg :dropdown_toggle, body: 'Flip False', data: { flip: "false" }
  = ui.nfg :dropdown_menu do
    = ui.nfg :dropdown_item, body: 'Dropdown Item 1'
    = ui.nfg :dropdown_item, body: 'Dropdown Item 2'
<div class="dropdown"><button class="btn dropdown-toggle btn-primary" data-flip="false" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Flip False<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
  <div class="dropdown-menu"><a class="dropdown-item">Dropdown Item 1</a><a class="dropdown-item">Dropdown Item 2</a></div>
</div>
Traits
Dropdown

The dropdown component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the dropdown.

id: 'my_id'
= ui.nfg :dropdown, id: 'my_id'
class:

Adds a class to the dropdown.

class: 'my-class'
= ui.nfg :dropdown, class: 'my-class'
body:

Shorthand for writing the button text without the dropdown_toggle component.

body: 'Dropdown'
= ui.nfg :dropdown, body: 'Dropdown'
describe:

For addding a data-describe to any dropdown.

describe: 'test-data-describe'
= ui.nfg :dropdown, describe: 'test-data-describe'
tooltip:

Shows a tooltip on dropdown.

tooltip: 'This is my tooltip!'
= ui.nfg :dropdown, tooltip: 'Hi there!'
dropup:

Opens the dropdown menu to the top.

dropup: true
= ui.nfg :dropdown, dropup: true
dropright:

Opens the dropdown menu to the right.

dropright: true
= ui.nfg :dropdown, dropright: true
dropleft:

Opens the dropdown menu to the left.

dropleft: true
= ui.nfg :dropdown, dropleft: true
render_if:

Condition to determine if the dropdown shows or not.

render_if: (1==1)
= ui.nfg :dropdown, render_if: (1==1)
render_unless:

Condition to determine if the dropdown shows or not.

render_unless: (1==1)
= ui.nfg :dropdown, render_unless: (1==1)
Dropdown Toggle

The dropdown toggle component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the dropdown toggle.

id: 'my_id'
= ui.nfg :dropdown_toggle, id: 'my_id'
class:

Adds a class to the dropdown toggle.

class: 'my-class'
= ui.nfg :dropdown_toggle, class: 'my-class'
disabled:

Used for dropdown toggles in a disabled state.

:disabled
= ui.nfg :dropdown_toggle, :disabled
body:

Text within the button.

body: 'Dropdown'
= ui.nfg :dropdown_toggle, body: 'Dropdown'
icon:

Icons placed to the right of the text (default side).

icon: 'caret-down'
= ui.nfg :dropdown_toggle, icon: 'caret-down'
describe:

For addding a data-describe to any dropdown toggle.

describe: 'test-data-describe'
= ui.nfg :dropdown_toggle, describe: 'test-data-describe'
as:

Determines the type of html element to render the dropdown toggle as.

:button
:a
= ui.nfg :dropdown_toggle, as: :a
offset:

Opens the dropdown menu at an offset position.

offset: '60,20'
= ui.nfg :dropdown_toggle, offset: '60,20'
size:

Determines the size of the dropdown toggle button.

:sm
:lg
= ui.nfg :dropdown_toggle, :sm
split:

Adjusts the styles to have two buttons side by side.

true
= ui.nfg :dropdown_toggle, :split
theme:

Determines the theme of the dropdown toggle.

:primary
:secondary
:success
:warning
:danger
:info
:light
:dark
:outlined
:link
= ui.nfg :dropdown_toggle, :success
tooltip:

Shows a tooltip on dropdown toggle.

tooltip: 'This is my tooltip!'
= ui.nfg :dropdown_toggle, tooltip: 'Hi there!'
data: { flip: "false" }

Opens the menu always to the bottom.

data: { flip: "false" }
= ui.nfg :dropdown_toggle, data: { flip: "false" }
Dropdown Menu

The dropdown menu component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the dropdown menu.

id: 'my_id'
= ui.nfg :dropdown_menu, id: 'my_id'
class:

Adds a class to the dropdown menu.

class: 'my-class'
= ui.nfg :dropdown_menu, class: 'my-class'
right:

Aligns the menu to the right of the button.

right: true
= ui.nfg :dropdown_menu, right: true
describe:

For addding a data-describe to any dropdown menu.

describe: 'test-data-describe'
= ui.nfg :dropdown_menu, describe: 'test-data-describe'
Dropdown Items

The dropdown items component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the dropdown item.

id: 'my_id'
= ui.nfg :dropdown_item, id: 'my_id'
class:

Adds a class to the dropdown.

class: 'my-class'
= ui.nfg :dropdown_item, class: 'my-class'
body:

Text for the dropdown item.

body: 'Dropdown Item'
= ui.nfg :dropdown_item, body: 'Dropdown Item'
icon:

Icon for the dropdown item. It displays to the left of the text.

icon: 'rocket'
= ui.nfg :dropdown_item, icon: 'rocket'
method:

For using a delete method.

method: :delete
= ui.nfg :dropdown_item, method: :delete
confirm:

For a confirming dialog after the button is clicked.

confirm: 'Are you sure?'
= ui.nfg :dropdown_item, confirm: 'Are you sure?'
disable_with:

Used to show after a dropdown item has been "submitted" and needs a loading state. Default text is "Saving".

:disable_with
disable_with: 'Disable with text'
= ui.nfg :dropdown_item, :disable_with
disabled:

Used for dropdown items in a disabled state.

:disabled
= ui.nfg :dropdown_item, :disabled
href:

Used for adding links to dropdown items.

href: 'http://www.networkforgood.com'
= ui.nfg :dropdown_item, href: 'http:www.networkforgood.com/'
describe:

For addding a data-describe to any dropdown item.

describe: 'test-data-describe'
= ui.nfg :dropdown_item, describe: 'test-data-describe'
active:

Used for dropdown items in an active state.

active: true
= ui.nfg :dropdown_item, active: true
theme:

Determines the theme of the dropdown item.

:primary
:secondary
:success
:warning
:danger
:info
:light
:dark
= ui.nfg :dropdown_item, :danger
tooltip:

Shows a tooltip on dropdown item.

tooltip: 'This is my tooltip!'
= ui.nfg :dropdown_item, tooltip: 'Hi there!'
modal:

Opens a modal from a dropdown item.

modal: '#test_modal'
= ui.nfg :dropdown_item, modal: '#test_modal'
render_if:

Condition to determine if the dropdown item shows or not.

render_if: (1==1)
= ui.nfg :dropdown_item, render_if: (1==1)
render_unless:

Condition to determine if the dropdown item shows or not.

render_unless: (1==1)
= ui.nfg :dropdown_item, render_unless: (1==1)