Navbar

The Navbar extension creates a responsive and collapsable Bootstrap Navbar for multiple levels, including an optional search box.

@x(Navbar{ Options })

Dependencies

This extension requires Bootstrap's style sheets and Javascript library as well as jQuery to be included. This can easily be done with @t(jquery), @t(bootstrapCSS) and @t(bootstrapJS) like this:

<head>
    ...
    <!-- jQuery has to be included before Bootstrap -->
    @t(jquery)
    @t(bootstrapCSS)
    @t(bootstrapJS)
    ...
</head>

Options

fluid: true - boolean

Make the navbar span the full browser window width.

fixedToTop: false - boolean

Lock the navbar into the top of a page.

brand: [Sitename] - string

Optional brand.

logo: false - string or false

Optional logo. The filename must be specified as a path starting at Automad's base directory.

logoWidth: 100 - integer

Width of the logo in pixels. logo must be defined.

logoHeight: 100- integer

Height of the logo in pixels. logo must be defined.

search: "Search" - string or false

Placeholder text for the navbar's search box. Set value to false to hide the search box.

searchPosition: "left" - string

Position of the search box. Possible values are:

  • "left"
  • "right"

levels: 2 - integer

Maximum number of levels to be reflected in the navigation.


Examples

Centered navbar with optional brand as shared variable:

<head>
    ...
    <!-- Include all dependencies -->
    @t(jquery)
    @t(bootstrapCSS)
    @t(bootstrapJS)
    ...
</head>
<body>      
    @x(Navbar {
        fluid: false,
        brand: @s(brand),
        search: "Search"
    })  
    ...
</body>

Full-width, fixed to the top and with an optional logo as shared variable, but without a search box:

@x(Navbar {
    fixedToTop: true,
    logo: @s(logo),
    logoWidth: 300,
    search: false
})
See also