Dropdowns are buttons with links inside, and optionally also text and dividers to break things up.

Dropdown("Click Me") {
    Link("Accordions", target: AccordionExamples())
    Link("Carousels", target: CarouselExamples())
    Text("Or you can just…")
    Link("Go back home", target: "/")

Styling dropdowns

Like other buttons, dropdowns can have roles and sizes:

for role in Role.allCases {
    for size in ButtonSize.allCases {
        Dropdown("\(size.rawValue.capitalized) \(role.rawValue) dropdown") {
            Link("Example Link", target: "#")
        .margin(.bottom, .extraSmall)

    Spacer(size: .medium)

Dropdowns in NavigationBar

Dropdowns also work great in NavigationBar elements – there’s one up there right now.

Created with Ignite