Sign in Get Access
Getting Started
Components

Dropdown

Description

Toggle between multiple options within a menu that appears when activated, providing a versatile interface element for website navigation and selection.

FREE
This component is available for free. It implements the Bootstrap Dropdown component. See the installation instructions below for more details.

Arguments

Name Default Type Description
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Default 

<%= render Railsboot::DropdownComponent.new do |dropdown| %>
  <% dropdown.with_action(text: "Dropdown") %>
  <% dropdown.with_link(text: "Link 1", href: "#") %>
  <% dropdown.with_link(text: "Link 2", href: "#") %>
  <% dropdown.with_link(text: "Link 3", href: "#") %>
<% end %>

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-primary dropdown-toggle">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li>
      <a class="dropdown-item" href="#">Link 1</a>
    </li>
    <li>
      <a class="dropdown-item" href="#">Link 2</a>
    </li>
    <li>
      <a class="dropdown-item" href="#">Link 3</a>
    </li>
  </ul>
</div>

With variant 

<%= render Railsboot::DropdownComponent.new do |dropdown| %>
  <% dropdown.with_action(text: "Dropdown", variant: "success") %>
  <% dropdown.with_link(text: "Link 1", href: "#") %>
  <% dropdown.with_link(text: "Link 2", href: "#") %>
  <% dropdown.with_link(text: "Link 3", href: "#") %>
<% end %>

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-success dropdown-toggle">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li>
      <a class="dropdown-item" href="#">Link 1</a>
    </li>
    <li>
      <a class="dropdown-item" href="#">Link 2</a>
    </li>
    <li>
      <a class="dropdown-item" href="#">Link 3</a>
    </li>
  </ul>
</div>

With dropdown link

With active link item

With disabled link item

With divider item 

<%= render Railsboot::DropdownComponent.new do |dropdown| %>
  <% dropdown.with_action(text: "Dropdown") %>
  <% dropdown.with_link(text: "Link 1", href: "#") %>
  <% dropdown.with_link(text: "Link 2", href: "#") %>
  <% dropdown.with_divider %>
  <% dropdown.with_link(text: "Link 3", href: "#") %>
<% end %>

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-primary dropdown-toggle">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li>
      <a class="dropdown-item" href="#">Link 1</a>
    </li>
    <li>
      <a class="dropdown-item" href="#">Link 2</a>
    </li>
    <li class="dropdown-divider">
      <hr>
    </li>
    <li>
      <a class="dropdown-item" href="#">Link 3</a>
    </li>
  </ul>
</div>

With header item 

<%= render Railsboot::DropdownComponent.new do |dropdown| %>
  <% dropdown.with_action(text: "Dropdown") %>
  <% dropdown.with_header(text: "Menu Header") %>
  <% dropdown.with_link(text: "Link 1", href: "#") %>
  <% dropdown.with_link(text: "Link 2", href: "#") %>
  <% dropdown.with_divider %>
  <% dropdown.with_link(text: "Link 3", href: "#") %>
<% end %>

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-primary dropdown-toggle">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-header">
      <h6>Menu Header</h6>
    </li>
    <li>
      <a class="dropdown-item" href="#">Link 1</a>
    </li>
    <li>
      <a class="dropdown-item" href="#">Link 2</a>
    </li>
    <li class="dropdown-divider">
      <hr>
    </li>
    <li>
      <a class="dropdown-item" href="#">Link 3</a>
    </li>
  </ul>
</div>

Slots

action Railsboot::Dropdown::ActionComponent

The action tag that drives the dropdown (Button or Link).

Name Default Type Description
text String Text on the Action Component
type button String Type of the dropdown action
Options: button, link
html_attributes {} Hash Any attributes for the used html wrapper tag
link Railsboot::Dropdown::LinkComponent Allows many

Display a link item in the dropdown

Name Default Type Description
text String Text on the link item
href String HTMl href attribute of the link item
active Boolean Define the active state it the link item
disabled Boolean Define the disabled state it the link item
html_attributes {} Hash Any attributes for the used html wrapper tag
divider Railsboot::Dropdown::DividerComponent Allows many

Display a divider item in the dropdown

Name Default Type Description
html_attributes {} Hash Any attributes for the used html wrapper tag
header Railsboot::Dropdown::HeaderComponent Allows many

Display a header item in the dropdown

Name Default Type Description
text String Text on the header item
html_attributes {} Hash Any attributes for the used html wrapper tag

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

  • A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
  • A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
  • The desired component itself (app/components/railsboot/dropdown_component.rb).
  • A view template (app/components/railsboot/dropdown_component.html.erb) for the component unless it's rendered inline.
  • Any other dependent components such as Slots (just if the component needs those)
  • Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
  • A test file for the components (test/components/railsboot/dropdown_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Divider Errors