Item Attributes | menu | Spatie

 SPATIE

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

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Menu](https://spatie.be/docs/menu/v3)  Controlling-the-html-output  Item Attributes

 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)

 Item Attributes
===============

###  On this page

1. [ Adding classes to a menu ](#content-adding-classes-to-a-menu)
2. [ Adding an ID to a menu ](#content-adding-an-id-to-a-menu)

The `Menu` and `Link` classes use the `HtmlAttributes` trait, which enables you to add attributes to their main elements (respectively the `ul` and `a` tags).

Adding classes to a menu
--------------------------------------------------------------------------------------------------------------------------------

The trait provides two methods to set attributes: `setAttribute` and `addClass`.

```
Menu::new()
    ->setAttribute('role', 'navigation')
    ->addClass('nav');
```

```

```

The `setAttribute` and `addClass` methods are smart enough to merge class names on render. The latter can also accepts both arrays and strings.

```
Link::to('#', 'Back to top')
    ->setAttribute('class', 'link')
    ->addClass(['button', 'top']);
```

```
Back to top
```

If you want to add classes or set attributes to all items in a menu, the `Menu` class provides some convenience methods: `addItemClass`, `setItemAttribute`.

Adding an ID to a menu
--------------------------------------------------------------------------------------------------------------------------

The trait provides two methods to set attributes: `setAttribute` and `id`.

```
Menu::new()
    ->setAttribute('role', 'navigation')
    ->id('nav');
```

```

```