v0.0.2older

Documentation version

Open files in your editor

Project folderVersion

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

Open files in

ComponentsLumos 0.0.2NewOpen component

Dropdown

A labelled control that opens a panel of anything.

Dropdown is a button and the panel it opens. What goes in the panel is up to you — links, a filter, a short form — which is what makes it different from Select: a select is a field that submits a value, and this is a place to put things.

astro

<Dropdown label="Resources">
  <ul>
    <li><a href="/guides">Guides</a></li>
    <li><a href="/support">Support</a></li>
  </ul>
</Dropdown>

<Dropdown label="Resources">
  <ul>
    <li><a href="/guides">Guides</a></li>
    <li><a href="/support">Support</a></li>
  </ul>
</Dropdown>

Props

Prop	Type	Default	What it does
`render`	`boolean`	`true`	Set to `false` to skip this component and everything inside it.
`label`	`string`	None	The text on the control that opens it.
`preview`	`boolean`	`false`	Holds the panel open while a visual builder is in design mode, so the content can be edited. Nothing changes on the published page.

Anything else you pass goes through to the wrapper, so a class or an id lands where you would expect.

Choosing between this and a Select

Reach for	When
Select	The reader is answering a question and the answer is submitted with a form.
`Dropdown`	The panel holds links, controls, or anything that is not one value.
Modal	What is inside needs the reader's full attention, or is too large for a panel.