Add id to docs (#144)

* add phpdoc to attributes class

* add id into introduction

* add id into `item-attributes`

* add title for `class` and `id` in item-attributes

* Fix styling

* Update docs/introduction.md

Co-authored-by: Sebastian De Deyne <sebastiandedeyne@gmail.com>

* Change class to classes into `item-attributes`

Co-authored-by: Sebastian De Deyne <sebastiandedeyne@gmail.com>

* remove phpdoc in Attributes

* Fix styling

* Update docs/controlling-the-html-output/item-attributes.md

Co-authored-by: Sebastian De Deyne <sebastiandedeyne@gmail.com>

---------

Co-authored-by: milwad-dev <milwad-dev@users.noreply.github.com>
Co-authored-by: Sebastian De Deyne <sebastiandedeyne@gmail.com>

Author: milwad-dev

docs/controlling-the-html-output/item-attributes.md

@@ -5,6 +5,8 @@ weight: 1
 
 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`.
 
 ```php
@@ -30,3 +32,18 @@ Link::to('#', '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`.
+
+```php
+Menu::new()
+    ->setAttribute('role', 'navigation')
+    ->id('nav');
+```
+
+```html
+<ul role="navigation" id="nav"></ul>
+```
+

docs/introduction.md

@@ -54,6 +54,26 @@ Menu::new()
 </div
 ```
 
+## Adding an ID to elements
+
+You can add id, so you can easily target some of these elements with CSS or JS.
+
+```php
+Menu::new()
+    ->id('navigation')
+    ->add(Link::to('/', 'Home')->id('home-link'))
+    ->add(Link::to('/about', 'About'))
+    ->add(Link::to('/contact', 'Contact'))
+```
+
+```html
+<ul id="navigation">
+    <li><a href="/" id="home-link">Home</a></li>
+    <li><a href="/about">About</a></li>
+    <li><a href="/contact">Contact</a></li>
+</ul>
+```
+
 ## Not Afraid of Depths
 
 The menu supports submenus, which in turn can be nested infinitely.