dropdown: Dropdown menus

View source: R/dropdown.R

dropdownR Documentation

Dropdown menus

Description

Dropdown menus are a container for buttons, text, and form inputs. See argument ... for details on composing dropdown menus.

Usage

dropdown(label, ..., direction = "down", align = "left")

Arguments

label

A character string specifying the label of the dropdown's button.

...

Character strings or vectors, header tag elements, button inputs, or form inputs specifying the elements of the dropdown. These elements may be grouped into lists to create a menu with sections. h6() is the recommended heading level for menu headers. Character vectors are converted into paragraphs of text. To format menu text use p() and utility functions.

Additional named arguments are passed as HTML attributes to the parent element.

direction

One of "up", "right", "down", or "left" specifying the direction in which the menu opens, defaults to "down".

align

One of "left" or "right" specifying which side of the button to align the dropdown menu to, defaults to "left".

Details

Getting started

In some cases a menuInput() isn’t enough and you will want to build a more complex dropdown menu.

To recreate a menut input.

Dropdown with buttons

dropdown(
  label = "Choices",
  buttonInput(id = "choice1", label = "Choice 1"),
  buttonInput(id = "choice2", label = "Choice 2"),
  buttonInput(id = "choice3", label = "Choice 3")
)

Dropdown with links

dropdown(
  label = "Choices",
  linkInput(id = "link1", label = "Choice 1"),
  linkInput(id = "link2", label = "Choice 2")
)

Grouped sections

dropdown(
  label = "Sections",
  h6("Section 1"),
  buttonInput(id = "a", label = "Option A"),
  buttonInput(id = "b", label = "Option B"),
  hr(),
  h6("Section 2"),
  buttonInput(id = "c", label = "Option C"),
  buttonInput(id = "d", label = "Option D")
)

Direction variations

dropdown(
  label = "Up!",
  direction = "up",
  buttonInput(id = "up1", label = "Choice 1"),
  buttonInput(id = "up2", label = "Choice 2")
)

Dropdowns with forms

dropdown(
  label = "Sign in",
  formInput(
    id = "login",
    formGroup(
      label = "Username / Email",
      textInput(
        type = "email",
        id = "user"
      )
    ),
    formGroup(
      label = "Password",
      textInput(
        type = "password",
        id = "pass"
      )
    ),
    formSubmit(
      label = "Sign in",
      value = "signin"
    )
  ) %>%
    padding(3, 4, 3, 4)
)

See Also

Other components: alert(), badge(), blockquote(), card(), collapsePane(), d1(), img(), jumbotron(), modal(), navContent(), popover(), pre(), toast()


nteetor/yonder documentation built on June 8, 2022, 1:36 p.m.