docs(dropdown): document [mode] input with detailed JSDoc and nav example

projects/design-angular-kit/src/lib/components/core/dropdown/dropdown-item/dropdown-item.component.ts

@@ -45,7 +45,21 @@ export class ItDropdownItemComponent extends ItLinkComponent implements OnInit {
   @Input() iconPosition: 'left' | 'right' = 'right';
 
   /**
-   * Dropdown mode
+   * Controls the CSS class applied to the inner link element of this dropdown item.
+   *
+   * - `'button'` (default): the item is styled as a standard dropdown entry (`dropdown-item` or `active`).
+   *
+   * - `'link'`: same visual as `'button'`; no additional CSS class is added.
+   *   Use when the parent `<it-dropdown>` is in link mode.
+   *
+   * - `'nav'`: adds the `nav-link` class to the inner link, making the item suitable
+   *   for navigation bars and headers. Typically set automatically by the parent
+   *   `<it-dropdown>` when its own `mode` is `'nav'`.
+   *
+   * **Note:** you rarely need to set this manually — the parent `<it-dropdown>` component
+   * propagates its `mode` to all child items automatically.
+   *
+   * @default 'button'
    */
   @Input() mode?: 'button' | 'link' | 'nav' = 'button';
 

projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.ts

@@ -30,7 +30,22 @@ import { inputToBoolean } from '../../../../utils/coercion';
 })
 export class ItDropdownComponent extends ItAbstractComponent implements AfterViewInit, OnChanges {
   /**
-   * Dropdown mode
+   * Controls the rendering mode of the dropdown trigger element.
+   *
+   * - `'button'` (default): renders a `<button>` element styled with Bootstrap Italia button classes.
+   *   Supports the `[color]` input for contextual coloring (primary, secondary, danger, etc.).
+   *
+   * - `'link'`: renders an `<a>` element styled as a link-button (`btn btn-dropdown dropdown-toggle`).
+   *   Useful when the dropdown should look like a hyperlink rather than a button.
+   *
+   * - `'nav'`: renders an `<a>` element with the `nav-link` class and adds `nav-item` to the wrapper.
+   *   Designed for use inside navigation bars and headers (`<it-header>`).
+   *   This mode is also propagated to child `<it-dropdown-item>` components, which receive
+   *   the additional `nav-link` CSS class on their inner link.
+   *
+   * The mode is automatically propagated to all child `ItDropdownItemComponent` instances.
+   *
+   * @default 'button'
    */
   @Input() mode: 'button' | 'link' | 'nav' = 'button';
 

src/app/dropdown/dropdown-examples/dropdown-examples.component.tpl

@@ -35,3 +35,15 @@
 <it-dropdown-host-attribute></it-dropdown-host-attribute>
 
 <it-source-display html="{$ sanitize(htmlHostAttribute) $}" typescript="{$ sanitize(typescriptHostAttribute) $}"></it-source-display>
+
+{% set htmlNav %}
+  {% include "../dropdown-nav-example/dropdown-nav-example.component.html" %}
+{% endset %}
+
+{% set typescriptNav %}
+  {% include "../dropdown-nav-example/dropdown-nav-example.component.ts" %}
+{% endset %}
+
+<it-dropdown-nav-example></it-dropdown-nav-example>
+
+<it-source-display html="{$ sanitize(htmlNav) $}" typescript="{$ sanitize(typescriptNav) $}"></it-source-display>

src/app/dropdown/dropdown-nav-example/dropdown-nav-example.component.html

@@ -0,0 +1,20 @@
+<h3>Dropdown nav</h3>
+<p>
+  Utilizzando <code>mode="nav"</code>, il dropdown si integra all'interno di barre di navigazione e header. Il trigger viene reso come un
+  elemento <code>&lt;a&gt;</code> con la classe <code>nav-link</code>, e il wrapper riceve la classe <code>nav-item</code>. La modalità
+  viene propagata automaticamente a tutti gli <code>&lt;it-dropdown-item&gt;</code> figli.
+</p>
+<div class="bd-example">
+  <nav class="navbar navbar-expand-lg">
+    <it-dropdown mode="nav">
+      <span button>Navigazione</span>
+      <ng-container list>
+        @for (item of items; track item) {
+          <it-dropdown-item [href]="item.link" [active]="item.active" [disabled]="item.disabled">
+            {{ item.text }}
+          </it-dropdown-item>
+        }
+      </ng-container>
+    </it-dropdown>
+  </nav>
+</div>

src/app/dropdown/dropdown-nav-example/dropdown-nav-example.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-dropdown-nav-example',
+  templateUrl: './dropdown-nav-example.component.html',
+  standalone: false,
+})
+export class DropdownNavExampleComponent {
+  items = [
+    {
+      link: '/home',
+      active: false,
+      disabled: false,
+      text: 'Home',
+    },
+    {
+      link: '/about',
+      active: true,
+      disabled: false,
+      text: 'Chi siamo',
+    },
+    {
+      link: '/contacts',
+      active: false,
+      disabled: true,
+      text: 'Contatti',
+    },
+  ];
+}

src/app/dropdown/dropdown.module.ts

@@ -8,6 +8,7 @@ import { DropdownExamplesComponent } from './dropdown-examples/dropdown-examples
 import { DropdownHostAttributeComponent } from './dropdown-host-attribute/dropdown-host-attribute.component';
 import { DropdownIndexComponent } from './dropdown-index/dropdown-index.component';
 import { DropdownLinkExampleComponent } from './dropdown-link-example/dropdown-link-example.component';
+import { DropdownNavExampleComponent } from './dropdown-nav-example/dropdown-nav-example.component';
 import { DropdownRoutingModule } from './dropdown-routing.module';
 
 @NgModule({
@@ -17,6 +18,7 @@ import { DropdownRoutingModule } from './dropdown-routing.module';
     DropdownExamplesComponent,
     DropdownIndexComponent,
     DropdownLinkExampleComponent,
+    DropdownNavExampleComponent,
     DropdownHostAttributeComponent,
   ],
 })