# Main-nav


## Examples

### Default

```html
<m-main-navigation
      .navigationData=${{
        mainNav: [
          { href: "/dashboard", label: "Dashboard", active: true },
          { href: "/projects", label: "Projects", active: false },
          { href: "/tasks", label: "Tasks", active: false },
          { href: "/settings", label: "Settings", active: false }
        ],
        subNav: [],
        currentPage: "Dashboard",
        currentLevel: 1
      }}
    >
    </m-main-navigation>
```

### WithActiveItem

```html
<m-main-navigation
      .navigationData=${{
        mainNav: [
          { href: "/dashboard", label: "Dashboard", active: false },
          { href: "/projects", label: "Projects", active: true },
          { href: "/tasks", label: "Tasks", active: false },
          { href: "/settings", label: "Settings", active: false }
        ],
        subNav: [],
        currentPage: "Projects",
        currentLevel: 1
      }}
    >
    </m-main-navigation>
```

### WithDisabledItems

```html
<m-main-navigation
      .navigationData=${{
        mainNav: [
          { href: "/dashboard", label: "Dashboard", active: false },
          { href: "/projects", label: "Projects", active: false },
          { href: "/tasks", label: "Tasks", active: false, disabled: true },
          { href: "/settings", label: "Settings", active: false }
        ],
        subNav: [],
        currentPage: "Dashboard",
        currentLevel: 1
      }}
    >
    </m-main-navigation>
```

### MobileView

```html
{
    const navigationData = {
      mainNav: [
        { label: "Dashboard", href: "/dashboard" },
        { label: "Settings", href: "/settings", active: true },
        { label: "Profile", href: "/profile" }
      ],
      subNav: [
        { label: "Account", href: "/settings/account" },
        { label: "Security", href: "/settings/security", active: true },
        { label: "Preferences", href: "/settings/preferences" }
      ],
      currentPage: "Security",
      currentLevel: 2
    };

    return html`
      <div style="max-width: 400px; border: 1px solid #ccc; padding: 16px;">
        <h3>Mobile View (≤768px)</h3>
        <p>Resize your browser to ≤768px width to see mobile navigation</p>

        <m-main-navigation
          .navigationData=${navigationData}
        >
          <!-- Fallback slot content -->
          <m-nav-item href="/dashboard" label="Dashboard"></m-nav-item>
          <m-nav-item href="/settings" label="Settings" active></m-nav-item>
          <m-nav-item href="/profile" label="Profile"></m-nav-item>
        </m-main-navigation>
      </div>
    `;
  }
```

### WithSlots

```html
<m-main-navigation>

      <m-nav-item href="/dashboard" label="Dashboard"></m-nav-item>
      <m-nav-item href="/settings" label="Settings" active></m-nav-item>
      <m-nav-item href="/profile" label="Profile"></m-nav-item>
    </m-main-navigation>
```