Dropdowns

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())
    Divider()
    Text("Or you can just…")
    Link("Go back home", target: "/")
}
.role(.primary)

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: "#")
        }
        .dropdownSize(size)
        .role(role)
        .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