Navigation

The NavigationBar element helps you add clear branding and navigation on every page.

A simple navigation bar has a title and some links, like this:

NavigationBar(logo: "My Awesome Site") {
    Link("Accordions", target: AccordionExamples())
    Link("Carousels", target: CarouselExamples())
    Link("Tables", target: TableExamples())
}
.background(.black)
.navigationBarStyle(.dark)

All navigation bars automatically adapt to a mobile-friendly layout when horizontal space is restricted. Try it out here!

You can also place Dropdown elements in there, like this:

NavigationBar(logo: "My Awesome Site") {
    Link("Accordions", target: AccordionExamples())
    Link("Carousels", target: CarouselExamples())
    Link("Tables", target: TableExamples())

    Dropdown("More") {
        Link("Cards", target: CardExamples())
        Link("Images", target: ImageExamples())
        Link("Lists", target: ListExamples())
    }
}
.navigationBarStyle(.light)
.background(.antiqueWhite)

Use modifiers like navigationItemAlignment(), navigationMenuIcon(), and navigationMenuStyle() to customize the appearance of the navigation bar:

NavigationBar(logo: "My Awesome Site") {
    Link("Accordions", target: AccordionExamples())
    Link("Carousels", target: CarouselExamples())
    Link("Tables", target: TableExamples())
}
.navigationItemAlignment(.leading)
.navigationMenuIcon(.ellipsis)
.navigationMenuStyle(.plain)
.background(.steelBlue)

Show buttons, forms, and other controls at all screen sizes using navigationBarVisibility(). These items will remain visible even when the navigation menu is collapsed:

NavigationBar(logo: "My Awesome Site") {
    Link("Accordions", target: AccordionExamples())
    Link("Carousels", target: CarouselExamples())
    Link("Tables", target: TableExamples())

    Link("GitHub", target: "https://github.com/twostraws/Ignite")
        .target(.newWindow)
        .linkStyle(.button)
        .role(.danger)
        .navigationBarVisibility(.always)
}
.navigationBarStyle(.dark)
.background(.paleVioletRed)

And finally, use the position() modifier to adjust where the bar is this placed. This page has a firebrick red bar fixed at the top, and a steel blue bar fixed at the bottom.

NavigationBar(logo: "My Awesome Site") {
    Link("Accordions", target: AccordionExamples())
    Link("Carousels", target: CarouselExamples())
    Link("Tables", target: TableExamples())
}
.navigationBarStyle(.dark)
.position(.fixedBottom)
.background(.steelBlue)

Just remember: when you used fixed bars, it's really important to add some padding to your body so your content doesn't stay under a fixed bar.