Button Nav

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

  • Dropdown - click the button and the block content drops down by the button or from the edge of the page
  • Lightbox - click the button and the block content appears in a lightbox overlay
  • Slide out - click the button and the block content slides out from the edge of the page

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.

If you have Buttons Factory Pro, you can even use button themes from Buttons Factory Pro. Button Nav will show available themes in the design dialog.

Button Nav is fully functional with Bootstrap based themes. Nevertheless, it can also work with 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.

Button Nav

jl_button_nav - v1.2.11

Button dropdown templates for core Autonav and other navigation blocks. Easily configure associated button icons, text and design from a new “Button Design” option in the block edit dropdown.

Block Types
Marketplace

Additional Pages

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.