Adding Items | menu | Spatie

 SPATIE

  HTML Menu Generator
======================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Menu](https://spatie.be/docs/menu/v3)  Basic-usage  Adding Items

 Version   v3   v2   v1

 Other versions for crawler [v3](https://spatie.be/docs/menu/v3) [v2](https://spatie.be/docs/menu/v2) [v1](https://spatie.be/docs/menu/v1)

- [ Introduction ](https://spatie.be/docs/menu/v3/introduction)
- [ Postcardware ](https://spatie.be/docs/menu/v3/postcardware)
- [ Requirements ](https://spatie.be/docs/menu/v3/requirements)
- [ Installation and Setup ](https://spatie.be/docs/menu/v3/installation-and-setup)
- [ Questions & Issues ](https://spatie.be/docs/menu/v3/questions-and-issues)
- [ Changelog ](https://spatie.be/docs/menu/v3/changelog)
- [ About Us ](https://spatie.be/docs/menu/v3/about-us)

Basic usage
-----------

- [ Your First Menu ](https://spatie.be/docs/menu/v3/basic-usage/your-first-menu)
- [ Adding Items ](https://spatie.be/docs/menu/v3/basic-usage/adding-items)
- [ Building a menu from a data source ](https://spatie.be/docs/menu/v3/basic-usage/building-a-menu-from-a-data-source)

Items in depth
--------------

- [ Active Items ](https://spatie.be/docs/menu/v3/items-in-depth/active-items)
- [ Manipulating Items ](https://spatie.be/docs/menu/v3/items-in-depth/manipulating-items)
- [ Conditionally Adding Items ](https://spatie.be/docs/menu/v3/items-in-depth/conditionally-adding-items)

Controlling the html output
---------------------------

- [ Item Attributes ](https://spatie.be/docs/menu/v3/controlling-the-html-output/item-attributes)
- [ Parent Attributes ](https://spatie.be/docs/menu/v3/controlling-the-html-output/parent-attributes)
- [ Appending and Prepending Html ](https://spatie.be/docs/menu/v3/controlling-the-html-output/appending-and-prepending-html)
- [ Non-list Menus ](https://spatie.be/docs/menu/v3/controlling-the-html-output/non-list-menus)

Menus in your Laravel app
-------------------------

- [ Convenience Methods ](https://spatie.be/docs/menu/v3/menus-in-your-laravel-app/convenience-methods)
- [ Views as Menu Items ](https://spatie.be/docs/menu/v3/menus-in-your-laravel-app/views-as-menu-items)
- [ Conditional Items Based on Permissions ](https://spatie.be/docs/menu/v3/menus-in-your-laravel-app/conditional-items-based-on-permissions)
- [ Using Macros ](https://spatie.be/docs/menu/v3/menus-in-your-laravel-app/using-macros)

Examples
--------

- [ Bootstrap Menu ](https://spatie.be/docs/menu/v3/examples/bootstrap-menu)

 Adding Items
============

###  On this page

1. [ Links ](#content-links)
2. [ Raw Html ](#content-raw-html)
3. [ Submenus ](#content-submenus)

Links
-----------------------------------------------------------------------

`Spatie\Menu\Link`

Links are created with the `to` factory method, which requires a url and a string of text (or html) as parameters. There's also a convenience method on the `Menu` class.

```
Menu::new()->add(Link::to('/', 'Home'));
```

```
Menu::new()->link('/', 'Home');
```

```

    Home

```

When using convenience methods to add items, you can't simultanuously add classes or attributes to the item since there isn't an instance variable.

Raw Html
--------------------------------------------------------------------------------

`Spatie\Menu\Html`

Raw html chunks can be added as menu items via the `Html` class or convenience method.

```
Menu::new()->add(Html::raw('Hi!'));
```

```
Menu::new()->html('Hi!');
```

```

    Hi!

```

It is also possible to add html directly into link display text, by calling `render` on the raw html and concatenating it with the rest of your desired output text or by writing the html directly into the display text. Please note, that this does not parse Laravel Blade syntax.

```
Menu::new()->link('/hi',Html::raw('Hello')->render()." World")
```

```
Menu::new()->link('/hi',"Hello World")
```

```

            Hello World

```

Submenus
--------------------------------------------------------------------------------

`Spatie\Menu\Menu`

Since the `Menu` class itself implements the `Item` interface, menus can be nested. All you need to do is pass a new `Menu` instance to the `add` function:

```
Menu::new()
    ->link('/', 'Menu')
    ->add(Menu::new()
        ->link('/basic-usage/your-first-menu', 'Your First Menu')
        ->link('/basic-usage/adding-submenus', 'Adding Submenus')
    );
```

```

        Menu

                    Your First Menu

                    Adding Submenus

```

You can also use submenus to divide your menu in sections. A header is optional, and can be a plain string or an instance of `item`. The menu parameter can be an instance of `Menu` or a callable which will pass through a new `Menu` as it's first parameter.

```
Menu::new()
    // No header, `Menu` instance
    ->submenu(Menu::new()
        ->link('/introduction', 'Introduction')
        ->link('/requirements', 'Requirements')
        ->link('/installation-setup', 'Installation and Setup')
    )
    // String header, `callable`
    ->submenu('Basic Usage', function (Menu $menu) {
        $menu
            ->prefixLinks('/basic-usage')
            ->link('/your-first-menu', 'Your First Menu')
            ->link('/working-with-items', 'Working With Items')
            ->link('/adding-sub-menus', 'Adding Sub Menus');
    });
```

```

            Introduction
            Requirements
            Installation and Setup

        Basic Usage

            Your First Menu
            Working With Items
            Adding Sub Menus

```

If you're using a callable, the new instance will be a blueprint—an empty copy—of the current menu. This means that filters applied to your main menu will also be applied to your submenu. This is useful for cascading `prefixLinks`.

```
Menu::new()
    ->prefixLinks('/foo')
    ->submenu(function (Menu $menu) {
        $menu
            ->prefixLinks('/bar')
            ->add('/baz', 'Baz');
    });
```

```

            Baz

```