WidgetNavbarFlyout

A navbar whose dropdowns share a single, persistent flyout panel that stays open and smoothly morphs (width, height, and horizontal position) as the cursor moves between top-level items — the Stripe “one container that resizes” pattern — instead of each menu abruptly closing and the next one opening.

It is a drop-in replacement for WidgetNavbar: the props, slots, and links shape are identical. Any top-level item with links becomes a flyout panel. Items flagged mega: true render multi-column Stripe-style rows (icon tile + title + description); plain items render a single-column list.

Hover the items below and move across them to see the panel persist and resize.

---
import { WidgetNavbarFlyout } from '@yatoday/astro-ui/astro';
---

<WidgetNavbarFlyout
  position="right"
  links={[
    {
      text: "Products",
      mega: true,
      links: [
        {
          text: "Windows",
          href: "/windows",
          icon: "tabler:window",
          links: [
            { text: "PVC Windows", href: "/windows/pvc", icon: "tabler:window", description: "Best price-to-insulation ratio" },
            { text: "Aluminum Windows", href: "/windows/aluminum", icon: "tabler:window-maximize", description: "Slim frames, more glass" },
            { text: "Soundproof Windows", href: "/windows/soundproof", icon: "tabler:ear", description: "Acoustic glazing for busy streets" }
          ]
        },
        {
          text: "Doors",
          href: "/doors",
          icon: "tabler:door",
          links: [
            { text: "Entrance Doors", href: "/doors/entrance", icon: "tabler:door", description: "Secure, insulated front doors" },
            { text: "Sliding Doors", href: "/doors/sliding", icon: "tabler:arrows-horizontal", description: "Smooth, space-saving glazing" }
          ]
        }
      ]
    },
    {
      text: "Brands",
      links: [
        { text: "REHAU", href: "/brands/rehau" },
        { text: "Kömmerling", href: "/brands/kommerling" },
        { text: "Cortizo", href: "/brands/cortizo" }
      ]
    },
    { text: "Pricing", href: "/pricing" },
    { text: "Docs", href: "/docs" }
  ]}
/>

Mega panels vs. simple dropdowns

A top-level item becomes a mega panel when it sets mega: true. Its direct children are rendered as columns: each column’s text/href/icon is the column heading, and its nested links are the leaf rows. Add a description (and optionally an icon) to a leaf to get the Stripe-style row — an icon tile, a bold title, and a muted subtitle.

Without mega, an item with links renders as a compact single-column list — so moving from a wide mega panel to a narrow list is what produces the visible resize.

{
  text: "Products",
  mega: true,           // multi-column Stripe-style panel
  links: [
    {
      text: "Windows",  // column heading
      href: "/windows",
      icon: "tabler:window",
      links: [
        // leaf row: icon tile + title + description
        { text: "PVC Windows", href: "/windows/pvc", icon: "tabler:window", description: "Best price-to-insulation ratio" }
      ]
    }
  ]
}

Sticky, theme toggle & slots

Like WidgetNavbar, it supports isSticky, showToggleTheme, and the logo / actions slots.

---
import { WidgetNavbarFlyout } from '@yatoday/astro-ui/astro';
import { Button } from '@yatoday/astro-ui/astro';
---

<WidgetNavbarFlyout
  isSticky={true}
  showToggleTheme={true}
  classes={{ container: "mx-auto max-w-6xl bg-background text-foreground" }}
  links={[ /* … */ ]}
  actions={[{ text: 'Action', href: '/', variant: 'outline' }]}
>
  <Fragment slot="logo">LOGO</Fragment>
  <Fragment slot="actions">
    <Button variant="outline" class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto">
      Create Account
    </Button>
  </Fragment>
</WidgetNavbarFlyout>

Behavior & accessibility

• Desktop interaction is JS-driven: hover or focus a trigger to open; moving between triggers keeps the panel open and morphs it; a short close delay lets the cursor cross the gap between a trigger and the panel without flicker.
• Keyboard: triggers are focusable buttons with aria-haspopup / aria-expanded; Escape and an outside click close the panel.
• Mobile (< md) falls back to an always-expanded accordion and needs no JS.
• Honors prefers-reduced-motion by collapsing the transitions.

Because the desktop panel animates open via script, the flyout requires JavaScript on desktop. The mobile accordion works without it.

Props