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>
spatie · Mar 13, 2023 · a630d58 · a630d58
1 parent fbe3c11
commit a630d58
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/docs/controlling-the-html-output/item-attributes.md b/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>
+```
+
diff --git a/docs/introduction.md b/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.