Implement PR review suggestions

Author: andyexeter

src/TwigComponent/doc/index.rst

@@ -676,14 +676,13 @@ the subdirectory:
     {# renders as: #}
     <button class="primary">Click Me!</button>
 
-If your component lives in a directory with the same name, you can
+If your anonymous component lives in a directory with the same name, you can
 name the component file ``index.html.twig`` to avoid repetition:
 
 .. code-block:: html+twig
 
     {# templates/components/Menu/index.html.twig #}
-    ...
-    <nav {{ attributes.defaults({class: 'navbar'}) }}>
+    <nav {{ attributes.defaults({class: 'menu'}) }}>
         <ul>
             {% block content %}{% endblock %}
         </ul>
@@ -692,28 +691,25 @@ name the component file ``index.html.twig`` to avoid repetition:
 .. code-block:: html+twig
 
     {# templates/components/Menu/Item.html.twig #}
-    ...
-    {% props href %}
-    <li {{ attributes.defaults({class: 'navitem'}) }}>
-        <a href="{{ href }}">{% block content %}{% endblock %}</a>
+    {% props href, label %}
+    <li {{ attributes.defaults({class: 'menu__item'}) }}>
+        <a href="{{ href }}">{% block content %}{{ label }}{% endblock %}</a>
     </li>
 
 .. code-block:: html+twig
 
     {# index.html.twig #}
     ...
-    <div>
-       <twig:Menu>
-           <twig:Menu:Item href="/">Home</twig:Menu:Item>
-           <twig:Menu:Item href="/about">About</twig:Menu:Item>
-       </twig:Menu>
-    </div>
+    <twig:Menu>
+        <twig:Menu:Item href="/">Home</twig:Menu:Item>
+        <twig:Menu:Item href="/about">About</twig:Menu:Item>
+    </twig:Menu>
 
     {# renders as: #}
-    <nav class="navbar">
+    <nav class="menu">
         <ul>
-            <li class="navitem"><a href="/">Home</a></li>
-            <li class="navitem"><a href="/about">About</a></li>
+            <li class="menu__item"><a href="/">Home</a></li>
+            <li class="menu__item"><a href="/about">About</a></li>
         </ul>
     </nav>