WidgetNavbar

.

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

<WidgetNavbar
  position="right"
  links={[
    {
      text: "Getting started",
      links: [
        {text: "Styling & Theme variables", href: "/docs/styling"}, 
        {text: "Components", href: "/docs/breadcrumbs"}, 
        {text: "Features", href: "/docs/feature-back-to-top"}, 
        {text: "Widgets", href: "/docs/widget-card-slider"}
      ]
    }, 
    {
      text: "Accessibility",
      links: [
        {text: "Accessibility", href: "/docs/accessibility"}, 
        {text: "Accessibility testing", href: "/docs/accessibility-testing"}
      ]
    }, 
    {text: "About Us", href: "/"}, 
    {text: "Contact", href: "/"}
  ]}
/>

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

<WidgetNavbar
  isSticky={true}
  showToggleTheme={true}
  classes={{
    container: "mx-auto max-w-6xl bg-background text-foreground",
  }}
  links={[
    {
      text: "Getting started",
      links: [
        {text: "Styling & Theme variables", href: "/docs/styling"}, 
        {text: "Components", href: "/docs/breadcrumbs"}, 
        {text: "Features", href: "/docs/feature-back-to-top"}, 
        {text: "Widgets", href: "/docs/widget-card-slider"}
      ]
    }, 
    {
      text: "Accessibility",
      links: [
        {text: "Accessibility", href: "/docs/accessibility"}, 
        {text: "Accessibility testing", href: "/docs/accessibility-testing"}
      ]
    }, 
    {text: "About Us", href: "/"}, 
    {text: "Contact", href: "/"}
  ]}
  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>
</WidgetNavbar>

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

<WidgetNavbar
  isSticky={true}
  classes={{
    container: "mx-auto max-w-6xl bg-background text-foreground",
  }}
  links={[
    {
      text: "Getting started",
      links: [
        {text: "Styling & Theme variables", href: "/docs/styling"}, 
        {text: "Components", href: "/docs/breadcrumbs"}, 
        {text: "Features", href: "/docs/feature-back-to-top"}, 
        {text: "Widgets", href: "/docs/widget-card-slider"}
      ]
    }, 
    {
      text: "Accessibility",
      links: [
        {text: "Accessibility", href: "/docs/accessibility"}, 
        {text: "Accessibility testing", href: "/docs/accessibility-testing"}
      ]
    }, 
    {text: "About Us", href: "/"}, 
    {text: "Contact", href: "/"}
  ]}
  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">
      Custom Action
    </Button>
  </Fragment>
</WidgetNavbar>

<!-- Actions as props -->
<WidgetNavbar
  actions={[
    { text: 'Action 1',  href: '/', variant: 'outline' },
    { text: 'Action 2',  href: '/', variant: 'primary' },
  ]}
/>

Props