← All blocks

Navbar with a product mega menu

navbar · mega-menu · navbar-mega-menu

npx shadcn@latest add @plus-ui/navbar-mega-menu

Default content

{
  "brand": "tessaly",
  "homeHref": "/",
  "links": [
    {
      "label": "Product",
      "href": "#",
      "groups": [
        {
          "title": "Analyze",
          "items": [
            {
              "title": "Retention",
              "description": "Cohorts that show who stays and why",
              "href": "#",
              "icon": "rollback"
            },
            {
              "title": "Funnels",
              "description": "Find the step where trials stall",
              "href": "#",
              "icon": "workflow"
            },
            {
              "title": "Revenue",
              "description": "MRR, expansion and churn by segment",
              "href": "#",
              "icon": "chart"
            }
          ]
        },
        {
          "title": "Connect",
          "items": [
            {
              "title": "Warehouse sync",
              "description": "Read events straight from Snowflake",
              "href": "#",
              "icon": "database"
            },
            {
              "title": "Alerts",
              "description": "Slack digests when a metric moves",
              "href": "#",
              "icon": "bell"
            },
            {
              "title": "Access controls",
              "description": "SSO, roles and audit history",
              "href": "#",
              "icon": "lock"
            }
          ]
        }
      ]
    },
    {
      "label": "Customers",
      "href": "#"
    },
    {
      "label": "Pricing",
      "href": "#"
    },
    {
      "label": "Docs",
      "href": "#"
    },
    {
      "label": "Changelog",
      "href": "#"
    }
  ],
  "featured": {
    "eyebrow": "Benchmark report",
    "title": "Week-4 retention across 1,200 SaaS products",
    "description": "What the top quartile does differently in the first 28 days, by plan and team size.",
    "href": "#",
    "cta": "Read the report"
  },
  "actions": [
    {
      "label": "Sign in",
      "href": "#",
      "variant": "secondary"
    },
    {
      "label": "Start free trial",
      "href": "#",
      "variant": "primary"
    }
  ],
  "navLabel": "Main",
  "menuLabel": "Open menu"
}