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!

The bar on this site is fixed, which means it will always stay visible at the top.

If you also plan to use a fixed bar, make sure you add some top padding to your `Body` object in your theme, so it doesn't start under the navigation bar.

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())
    }
}
.background(.steelBlue)
.navigationBarStyle(.dark)

Use the .navigationItemAlignment() modifier to align bar items centrally or to the trailing edge:

NavigationBar(logo: "My Awesome Site") {
    Link("Accordions", target: AccordionExamples())
    Link("Carousels", target: CarouselExamples())
    Link("Tables", target: TableExamples())
}
.background(.antiqueWhite)
.navigationItemAlignment(.trailing)

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())
}
.background(.steelBlue)
.navigationItemAlignment(.trailing)
.navigationBarStyle(.dark)
.position(.fixedBottom)

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.

Created with Ignite