camurphy/bootstrap-menu-bundle

Render Bootstrap 4 menus using Symfony

Installs: 2 128

Dependents: 0

Suggesters: 0

Security: 0

Stars: 2

Watchers: 0

Forks: 2

Open Issues: 4

Type:symfony-bundle

1.3.0 2021-06-07 06:23 UTC

This package is auto-updated.

Last update: 2021-11-07 07:19:24 UTC


README

Codeship Status for cameronmurphy/bootstrap-menu-bundle

A simple Symfony bundle for defining your application's menus in configuration and rendering them to work with Bootstrap's Navbar component. This bundle supports Bootstrap versions 4 and 5.

Installation

$ composer require camurphy/bootstrap-menu-bundle

Usage

Your menus are defined in config/packages/bootstrap_menu.yaml.

Below is a very simple menu called main with with only a single 'Logout' link.

bootstrap_menu:
  version: 5 # Optional, defaults to Bootstrap 5
  menus:
    main:
      items:
        logout:
          label: 'Logout'
          route: 'app_logout'

Then within your template you can render your menu in a Navbar by passing the name of your menu to render_bootstrap_menu. This markup is taken from the Bootstrap Navbar Fixed example. The Bootstrap 4 version is here

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
            aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        {{ render_bootstrap_menu('main') }}
      </ul>
    </div>
</nav>

Result:

Example 1

Route parameters

Perhaps your route requires parameters. You can also specify these.

bootstrap_menu:
  menus:
    main:
      items:
        backorder_report:
          label: 'Backorder Report'
          route: 'app_reports'
          route_parameters:
            id: 'backorder'

External URL

If you would instead like to link to an absolute URL, use url instead.

bootstrap_menu:
  menus:
    main:
      items:
        disney:
          label: 'Disney'
          url: 'https://www.disney.com'

Dropdowns

Simply by specifying items instead of a route or url to link to, your menu item becomes a Dropdown. Here's an example where a 'Change Password' and a 'Logout' link are nested below an 'Account' dropdown.

bootstrap_menu:
  menus:
    main:
      items:
        account:
          label: 'Account'
          items:
            change_password:
              label: 'Change password'
              route: 'app_change_password'
            logout:
              label: 'Logout'
              route: 'app_logout'

Result:

Example 2

Dividers

Dropdowns can also contain Dividers to separate groups of related menu items.

bootstrap_menu:
  menus:
    main:
      items:
        account:
          label: 'Account'
          items:
            change_password:
              label: 'Change password'
              route: 'app_change_password'
            divider:
              is_divider: true
            logout:
              label: 'Logout'
              route: 'app_logout'

Result:

Example 3

Headers

Dividers that also contain a label become Headers.

bootstrap_menu:
  menus:
    main:
      items:
        account:
          label: 'Account'
          items:
            password_divider:
              is_divider: true
              label: 'Password Stuff'
            change_password:
              label: 'Change password'
              route: 'app_change_password'

            other_divider:
              is_divider: true
              label: 'Other Stuff'
            logout:
              label: 'Logout'
              route: 'app_logout'

Result:

Example 4

Security

Certain parts of the menu may be locked down by role. This following example only allows administrators to change their password.

bootstrap_menu:
  menus:
    main:
      items:
        account:
          label: 'Account'
          items:
            password_divider:
              is_divider: true
              label: 'Password Stuff'
            change_password:
              label: 'Change password'
              route: 'app_change_password'
              roles: [ 'ROLE_ADMINISTRATOR' ]

            other_divider:
              is_divider: true
              label: 'Other Stuff'
            logout:
              label: 'Logout'
              route: 'app_logout'

For a user without ROLE_ADMINISTRATOR they would see:

Example 5

The reason for this is Bootstrap Menu Bundle intelligently prunes Dropdowns to remove unnecessary Dividers. Because the user is not permitted to see any items between 'Password Stuff' and 'Other Stuff', the 'Password Stuff' Divider is also pruned.

Security can also be configured at a Dropdown level. Perhaps only administrators are allowed to use the 'Users' menu.

bootstrap_menu:
  menus:
    main:
      items:
        users:
          label: 'Users'
          roles: [ 'ROLE_ADMINISTRATOR' ]
          items:
            user_list:
              label: 'Users'
              route: 'app_user_list'
            new_user:
              label: 'New User'
              route: 'app_new_user'