Dropdown Menu

Navigation

A floating menu for actions — custom widget with overlay support.

Preview

My Account

Usage

dropdown.rs

use floe_ui::components::{dropdown, button, separator};
use iced::widget::{column, text};

"text-zinc-500">// Create the dropdown menu content
let menu = dropdown::dropdown_menu(
    column![
        dropdown::dropdown_item(text("Profile"), Message::Profile, &tokens),
        dropdown::dropdown_item(text("Billing"), Message::Billing, &tokens),
        separator::horizontal(&tokens),
        dropdown::dropdown_item(text("Log out"), Message::Logout, &tokens),
    ].spacing(2),
    &tokens,
).width(220.0);

"text-zinc-500">// Create the dropdown widget with trigger
let dropdown_widget = dropdown::Dropdown::new(
    button::outline("Open Menu", &tokens)
        .on_press(Message::ToggleMenu),
    menu,
    self.is_menu_open,
).on_dismiss(Message::CloseMenu);

API Reference

Props / Parameters

Name	Type	Default	Description
base	impl Into<Element>	—	Trigger element (usually a button)
menu	impl Into<Element>	—	Menu content to display in overlay
is_open	bool	—	Whether the menu is currently visible
on_dismiss	Message	—	Message sent when clicking outside the menu

Style Functions

menu_style(tokens)

item_style(tokens)

Style functions return closures compatible with Iced's .style() method.

Builder Functions

Dropdown::new(base, menu, is_open)

dropdown_menu(content, tokens)

dropdown_item(content, on_press, tokens)

Builder functions return pre-configured Iced widgets ready for use.

Source: floe-ui/src/components/dropdown.rs