Button Nav

Apply bootstrap dropdown templates and lightbox overlay templates to create button popups for core Autonav and other navigation blocks. Popup anything by using a button nav template with a content block or stack. Easily configure associated button icons, text and design from a new 'Button Design' option in the block edit dropdown.

Blocks and templates are provided for:

All of these share an easy dialog for configuring the button style, size, colour and icon using standard bootstrap options. Buttons can be left inline or aligned with the edges of the window. The navigation templates extend this with options for dropdown alignment and direction.

Button Nav is designed to work with Bootstrap based themes. Nevertheless, it can also work with some other themes. Please message me through a support request if you would like to discuss use with a specific theme.

Some ideas for using button nav:

  • As the main navigation template for mobile-only sites or where header space is at a premium.
  • Top provide header navigation visually separated from a site's main navigation bar.
  • For localised navigation within pages, such as a 'read more' button or link which shows some options on what to read.
  • To attach navigation elements to the side of the browser window.
  • To popup stacks, content and other blocks.
Marketplace

Examples

A direct navigation button linked back to the Addons page. Options are selected to style regular bootstrap corners (Elemental has a larger radius), enlarge the icon and rotate it. 

Return

A button nav dropdown template applied to a core autonav. The autonav is set to list pages beneath the addons page alphabetically. Button design has been left at what Elemental provides by default, but both icon and text enlarged.

A button nav dropdown template applied to a core autonav. Here it is configured to 'dropup' and right aligned. The button corner styles have been overridden to use the default bootstrap corners.