Menu

A simple menu, for any type of vertical navigation.

The menu is a vertical navigation component which consists of menu-header , menu-label and menu-list.

To use a Menu component in your application, you need to import the BulmaMenuModule by adding the following lines to your app.module.ts file.

import { BulmaMenuModule } from 'ngx-bulma';

@NgModule({
  imports: [BulmaMenuModule]
  // ...
})
export class AppModule {}

Basic Menu Details

The most basic menu needs only of <bu-menu> element with some content. However, Bulma components provides a number of preset sections that you can use inside of <bu-menu>

Components Description
<bu-menu> Menu parent component
<bu-menu-header> Menu Header
<bu-menu-list> Menu Title

An example menu is shown below.


<bu-menu>
  <bu-menu-header>Administration</bu-menu-header>
  <bu-menu-list>
    <img
      src="assets/images/dashboard.png"
      style="float: left; margin-top: 10px; margin-right: 3px;"
    />
    <i class="icon-dashboard"></i>
    <a>Dashboard</a>
    <img
      src="assets/images/support.png"
      style="float: left; margin-top: 10px; margin-right: 3px;"
    />
    <a>Customers</a>
  </bu-menu-list>
  <bu-menu-list>
    Team Settings
    <bu-menu-list>
      <a class="is-active">Manage Your Team</a>
      <a>Members</a>
      <a>Plugins</a>
      <a>Add a member</a>
    </bu-menu-list>
  </bu-menu-list>
</bu-menu>