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.
Installs: 482
Dependents: 0
Suggesters: 0
Security: 0
Stars: 3
Watchers: 6
Forks: 0
Open Issues: 0
Type:contao-bundle
Requires
- php: ^7.4 || ^8.0
- contao/core-bundle: ^4.9
- heimrichhannot/contao-encore-contracts: ^1.0
- symfony/config: ^4.4 || ^5.4
- symfony/http-kernel: ^4.4 || ^5.4
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 thenav_buttermenu_default
template. - Enable
contao-buttermenu-bundle
asactive entry
at thepage 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.