• Stars
    star
    271
  • Rank 151,228 (Top 3 %)
  • Language
    PHP
  • Created over 12 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Menu made easy

Menu

Build Status Total Downloads Latest Stable Version Latest Unstable Version License

API Docs

Are you the type of person that writes menus by hand in view files or do you find yourself looking for the best place to store links to pages on your website? then Menu is for you!

Quick overview example

$menu = Menu::handler('mailbox'); 

// items
$menu
    ->add('contacts', 'Contacts')
    ->add('inbox', 'Inbox')
    ->raw(null, null, ['class' => 'divider'])
    ->add('folders', 'Folders', Menu::items() 
        ->prefixParents() 
        ->add('urgent', 'Urgent') // with prefix: /folders/urgent
        ->add('sent', 'Sent')
        ->add('deleted', 'Deleted')
    );

// styling
$menu
    ->addClass('nav navbar-nav')
    ->getItemsByContentType(Menu\Items\Contents\Link::class)
    ->map(function($item) {
        if ( $item->isActive() )  {
            $item->addClass('active');
        }
    });

{!! $menu !!} will output:

<ul class="nav navbar-nav">
  <li class="active"> <!-- current element in laravel, detected by library -->
    <a href="http://myapp.com/contacts">Contacts</a>
  </li>
  <li>
    <a href="http://myapp.com/inbox">Inbox</a>
  </li>
  <li class="divider"></li>
  <li>
    <a href="http://myapp.com/folders">Folders</a>
    <ul>
      <li>
        <a href="http://myapp.com/folders/urgent">Urgent</a>
      </li>
      <li>
        <a href="http://myapp.com/folders/sent">Sent</a>
      </li>
      <li>
        <a href="http://myapp.com/folders/deleted">Deleted</a>
      </li>
    </ul>
  </li>
</ul>

Key concepts

Item lists

An item list is what a menu is all about and it should be pretty self explanatory because it simply stores a list of items. there are some configurations available for an item list. You can, for example set the HMTL element that will be used to render the list, prefix every item in the list with all the parent's url segments, and a lot more. We will explore these options later.

Menu handlers

Menu handlers allow us to create and interact with item lists and act as a place to store and retrieve our menus. Because we are able to interact with multiple item lists at the same time some interesting possibilities become available to us.

Items

The Menu package has 2 types of items available out of the box.

  • Link For creating links to other pages
  • Raw Be free to add anything you like in the item. This type is usually used for dividers, titles etc.

The HTML element and attributes for the item can also be changed, more on this topic later.

Installing

Laravel 3

Install Menu via the artisan command line tool. Open the terminal and navigate to your Laravel project's root. Now type the following command :

php artisan bundle:install menu

To let Laravel know the Laravel Menu package should be started, open up application/packages.php and add the following lines to the packages array.

'menu' => array('auto' => true),

Laravel 4

Add this to your composer.json file's "require" :

"vespakoen/menu": "2.*"

And add the following to your app/config/app.php file :

  • In the Service Providers array : 'Menu\MenuServiceProvider',
  • In the aliases array : 'Menu' => 'Menu\Menu',

Laravel 5

Add this to your composer.json file's "require" :

"vespakoen/menu": "3.*"

And add the following to your config/app.php file :

  • In the Service Providers array : 'Menu\MenuServiceProvider',
  • In the aliases array : 'Menu' => 'Menu\Menu',

Lastly, run the following from your project's root dir:

php artisan vendor:publish

Basic usage

First, let's load some pages into the menu. We will do this by utilising the hydrate method.

Menu::handler('main')->hydrate(function()
  {
    return Page::with('translation')
      ->where('group', '=', 'main')
      ->get();
  },
  function($children, $item)
  {
    $children->add($item->translation->slug, $item->translation->name, Menu::items($item->as));
  });

/* the hydrate method takes these arguments
  $resolver       Closure     A callback to resolve results
  $decorator      Closure     A callback that gets called for every result fetched from the resolver with the corresponding ItemList and result as the arguments
  $idField        integer (default = 'id')           the property on the result that contains the id
  $parentIdField  integer (default = 'parent_id')    the property on the result that contains the parent id
  $parentId       integer (default = 0)              the parentId to start hydrating from
*/

Now that we have loaded our pages into the menu, and even identified every menu item with a name (via Menu::items($item->as)) a lot of options are available to us.

Find a node by it's name and add a subitem.

Menu::find('users')
  ->add('users/create', 'Create new user');

Add some properties to the root node

Menu::handler('main')
  ->addClass('nav navbar-nav');

Get all ItemLists at a certain depth and add a class

Menu::handler('main')
  ->getItemListsAtDepth(0)
  ->addClass('level-1');

Get all ItemLists at a depth range and change the element

Menu::handler('main')
  ->getItemListsAtDepthRange(0,2)
  ->setElement('div');

Get all Items at a certain depth and add a class

Menu::handler('main')
  ->getItemsAtDepth(0)
  ->addClass('level-1');

Get Items by it's content type and use the map function to walk over the results and perform actions based on gathered information

Menu::handler('main')
  ->getItemsByContentType('Menu\Items\Contents\Link')
  ->map(function($item)
  {
    if($item->isActive() && $item->hasChildren())
    {
      $item->addClass('is-active-link-with-children');
    }

    if($item->getContent()->getUrl() == 'home')
    {
      $item->addClass('is-home');
    }
  });

Get all ItemLists and add a class to them if they have children

Menu::handler('main')
  ->getAllItemLists()
  ->map(function($itemList)
  {
    if($itemList->hasChildren())
    {
      $itemList->addClass('has-children');
    }
  });

Breadcrumbs

Breadcrumb hell is a thing of the past.

Bootstrap ready breadcrums are as easy as this

Menu::handler('main')
    ->breadcrumbs()
    ->setElement('ol')
    ->addClass('breadcrumb');

The breadcrumbs method searches all handlers and returns a plain old ItemList, that you can manipulate. If you call the breadcrumbs method directly on the Menu class, it will search all your handlers for breadcrumbs, and by default will return the first match. However, there might be cases where you want to choose the breadcrumbs out of the ones it found, for this you can provide a callback method as the first argument.

And example is shown below:

Menu::breadcrumbs(function($itemLists)
    {
      return $itemLists[0]; // returns first match
    })
    ->setElement('ol')
    ->addClass('breadcrumb');

Diving deeper

The Laravel Menu packages consists of a couple of classes, but you can interact with all of them via the Menu class. Let's take a look at the handler method. it takes a string or an array as the only argument, the string(s) given are the names for the item lists we want to retrieve. If an itemlist we asked for didn't exist yet, it will create it for us. After the menu class has found and created the item lists we want, it will hand back a menuhandler that handles the item lists we asked for.

// Get a MenuHandler instance that handles an ItemList named "main"
Menu::handler('main');

When we call a method on this menu handler, it will simply forward the call to all the item lists that it handles. In order to find out what we can do now that we have a handler, we need to take a look at the methods on the ItemList class.

The ItemList class has a method called add that you are probably going to use a lot. It adds an Item of type "link" to the ItemList.

Menu::handler('main')->add('home', 'Homepage');

/* The add method takes these arguments
  $url  string  The URL to another page
  $title  string  The visible string on the link
  $children (default = null)  ItemList  (optional) The children of this page
  $link_attributes (default = array())  array (optional) HTML attributes for the <a> element
  $item_attributes (default = array())  array (optional) HTML attributes for the list element (usually <li>)
  $item_element (default = 'li')  string  (optional) The type of the list element
*/

Let's take a look at the raw method, for adding "anything" to the list.

Menu::handler('main')->raw('<img src="img/seperator.gif">');

/* The raw method takes these arguments
  $html string  The contents of the item
  $children (default = null)  ItemList  (optional) The children of this item
  $item_attributes (default = array())  array (optional) HTML attributes for the list element (usually <li>)
  $item_element (default = 'li')  string  (optional) The type of the list element
*/

Great! Now that we have learned how to add items to an item list, let's have a look at how we add children to a item. Every item can have children, the children object is just another ItemList. As we have seen before, we can create item lists via the handler method, but this method returns a MenuHandler, making it unusable for item children. So what do we use? the items method returns a fresh ItemList object. Let's have a look.

Menu::handler('main')
    ->add('home', 'Homepage', Menu::items()
        ->add('sub-of-home', 'Sub of homepage'));

/* The items method takes these arguments
  $name (default = null)  string  (optional) The name (=identifier) of this ItemList
  $attributes (default = array()) array (optional) HTML attributes for the ItemList element (usually <ul>)
  $element (default = 'ul') string  (optional) The type of the ItemList element
*/

So now we know how to build menus, add items and items with children. Let's find out how to display the menus. The MenuHandler and ItemList classes implement the "__toString" method, that calls the render method. This means you can simply echo the MenuHandler or ItemList object. Here is an example to make things more clear.

echo Menu::handler('main');

// Is the same as

echo Menu::handler('main')->render();

Now that we have the basics under control, we are going to explore some other cool features this package provides.

Class diagram

Class diagram

Some last words

Thanks for following along and using this package. Special thanks to @Anahkiasen for refactoring this package and boosting new life into it!

More Repositories

1

authority-laravel

Role Based Access Control bundle for Laravel
PHP
121
star
2

epi

Api builder for Eloquent
PHP
12
star
3

dwaler

Wander round without being commanded. ((motor)cycle) navigation and logger with an Arduino.
JavaScript
10
star
4

laravel-history

Simple EventSourcing for Laravel
PHP
9
star
5

extendscriptkit-boilerplate

Write Adobe extensions in ES6 + Better debugging experience (basically a bag of hacks to get ES6 support in ExtendScript. includes LiveReload and console.log / console.error support from ExtendScript to CEF's remote console, React, Redux and Redux remote devtools)
JavaScript
9
star
6

react-native-waveform

react-native module that exposes (and fixes some bugs in) FDWaveformView for visualizing waveforms of an audio file.
Java
7
star
7

AssetCompressor

A Laravel bundle that minifies CSS and JS (MinifyCSS & Closure-compiler)
PHP
6
star
8

waveform-data-api

Firebase Cloud Function that wraps ffmpeg, converts sounds to waveform data and caches the results in the database
TypeScript
4
star
9

extendscriptkit

ExtendScriptKit - Modern (ES5) shims and helpers for ExtendScript (mostly for AE at the moment), !needs to be bundled with Browserify! see modern-extendscript
JavaScript
4
star
10

dev-machine

My Dev Machine (with SaltStack)
Shell
3
star
11

geozip

A geozip implementation for node and the browser.
JavaScript
3
star
12

drone-docker-compose

Testing drone
Shell
3
star
13

hummingguru

HummingGuru is Shazam for songs that are in your mind and you just can't find. You can help others find their song, and ask others to find yours.
HTML
2
star
14

react-native-camera2

Android camera2 (WIP!)
Java
2
star
15

dnode-promise

Helper for using promises on a dnode server
JavaScript
2
star
16

salt-states

My salt states
Scheme
1
star
17

laravel-shim

Use L4 and it's packages in L3
PHP
1
star
18

Sublime-Theme

1
star
19

ansible-dev-machine

My dev machine
Haskell
1
star
20

actual-empty-object

An empty object, useful for shimming
JavaScript
1
star
21

jocks

Javascript Blocks
JavaScript
1
star
22

ontheweb

My open source project websites
JavaScript
1
star