heimrichhannot/contao-buttermenu-bundle

A smooth animated navigation menu for contao with hover dropdown (big screens for instance) and off-canvas (mobile for instance) modes.

2.1.0 2022-04-28 07:59 UTC

Requires

• php: ^7.4 || ^8.0
• contao/core-bundle: ^4.9
• heimrichhannot/contao-encore-bundle: ^1.5
• symfony/config: ^3.4 || ^4.4 || ^5.4
• symfony/http-kernel: ^3.4 || ^4.4 || ^5.4

LGPL-3.0-or-later

• Heimrich & Hannot

README

A smooth animated navigation menu for contao with hover dropdown (big screens for instance) and off-canvas (mobile for instance) modes.

Technical Instructions

• Attach the butter menu to your navigation front end module by using the nav_buttermenu_default template.
• Enable contao-buttermenu-bundle as active entry at the page setting (Encore Fieldset)
• Add @import "~contao-buttermenu/scss/_buttermenu"; to your project scss file and adjust variables before if required

Styling

By default no styles are generated, set $bm-menu-generate-classes to true to style butter menu with defaults, otherwise use the provided mixins as stated below.

Required mixins for the default mode (include inside your media queries):

@include media-breakpoint-up(md) {
	@include bm-default(theme-color('primary'));
}

Required mixins for the compact off-canvas mode (include this inside your media queries):

// .header_compact.scss
@include media-breakpoint-down(sm) {
	@include bm-compact-basics();
	@include bm-compact-backdrop();
	@include bm-compact-default(theme-color('primary'));
}

Using the compact off-canvas mode

If you have data-bm-compact-mode set to off-canvas on your nav_buttermenu_default template, you will need an canvas wrapper and for sure an burger menu. The example below shows how it can work:

<div class="header-static">
	<a href="/" class="header-brand">
		<img src="logo.png" alt="logo"
	</a>
	<button class="hamburger hamburger--spin" type="button" data-bm-compact-toggle=".bm-compact-canvas" aria-controls=".header-collapse" aria-expanded="false">
	  <span class="hamburger-box">
	    <span class="hamburger-inner"></span>
	  </span>
	</button>
</div>
<div class="header-collapse bm-compact-canvas" aria-hidden="false">
	<div class="header-language">
		<!-- Optional: Change language module can be here by using {{insert_module::x}} -->
	</div>
	<div class="header-meta">
		<!-- Optional: Meta navigation can be here by using {{insert_module::x}} -->
	</div>
	<div class="header-navbar bm-compact-scroll">
		<!-- Required: Insert your Navigation menu module with attached nav_buttermenu_default here by using {{insert_module::x}} -->
	</div>
</div>

We recommend using animated Hamburger icons from Jonathan Suh. The is-active will be added automatically upon off-canvas menu is opened.

Settings