Font Awesome and Moodle, Part 15 – Menu

In part fifteen of this series we find out how to create a simple menu with Font Awesome and Bootstrap.

It’s even possible to create a simple menu button that will work in Moodle.

This is definitely in the more advanced area, and it uses the input group code. Look at this example:

<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
  </ul>
</div>

It creates this dropdown menu button:

With some small changes to the code, it could easily be adapted like this:

<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-info fa-fw"></i> Useful links</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-file-text fa-fw"></i> Support documents</a></li>
    <li><a href="#"><i class="fa fa-car-o fa-fw"></i> Field trips</a></li>
    <li><a href="#"><i class="fa fa-universal-access fa-fw"></i> Accessibility information</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
  </ul>
</div>

• About
• Latest Posts

Stuart Mealor

Managing Director at HRDNZ

Stuart is interested in all things e-learning, with specific interests in Moodle, e-learning strategy, and business development.His experience in education over 30 years, MBA in International Business, and knowledge of e-learning systems implementation, together with graphic design background, give him a unique skill set for e-learning projects.

Latest posts by Stuart Mealor (see all)

• H5P periodic table – 8th September 2023
• Moodle 4.0 – 15th May 2022
• Moodle 4.0 other highlights – 14th May 2022