PHPackages                             heimrichhannot/contao-buttermenu-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. heimrichhannot/contao-buttermenu-bundle

ActiveContao-bundle

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.2.0(1y ago)3520LGPL-3.0-or-laterPHPPHP ^7.4 || ^8.0

Since Oct 24Pushed 1y ago5 watchersCompare

[ Source](https://github.com/heimrichhannot/contao-buttermenu-bundle)[ Packagist](https://packagist.org/packages/heimrichhannot/contao-buttermenu-bundle)[ Docs](https://github.com/heimrichhannot/contao-buttermenu-bundle)[ RSS](/packages/heimrichhannot-contao-buttermenu-bundle/feed)WikiDiscussions master Synced 2mo ago

READMEChangelog (3)Dependencies (4)Versions (17)Used By (0)

Butter menu
===========

[](#butter-menu)

[![](https://camo.githubusercontent.com/ed48b44f15fb091b39a8379755f1ed001a6467dc7853bfc31f219a84c74df012/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6865696d7269636868616e6e6f742f636f6e74616f2d62757465726d656e752d62756e646c652e737667)](https://packagist.org/packages/heimrichhannot/contao-butermenu-bundle)[![](https://camo.githubusercontent.com/b774b3ab03957d9f26c28c2aa27fe0db236a05d9483114373206acd78753801b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6865696d7269636868616e6e6f742f636f6e74616f2d62757465726d656e752d62756e646c652e737667)](https://packagist.org/packages/heimrichhannot/contao-butermenu-bundle/stats)

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

Technical Instructions
----------------------

[](#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
-------

[](#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

[](#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:

```