Components

Blocks

  1. Topbar
    1. Default
    2. Custom
    3. Props

Topbar

A responsive navigation bar block that sticks to the top of the page. Renders a full-width container with support for a logo, desktop navigation links, and a theme mode toggle. On smaller screens, the menu collapses into a slide-up drawer triggered by a menu button.

Default

Provide menuItems for the navigation links and place your logo in the logo slot.

Pindoba
Select a theme mode
Navigation
Select a theme mode 
---
import Topbar from "../Topbar.astro";
import type { MenuItem } from "@pindoba/astro-navigation";
import { css } from "@pindoba/styled-system/css";

const menuItems: MenuItem[] = [
  { label: "Home", href: "#" },
  { label: "About", href: "#" },
  { label: "Blog", href: "#" },
  { label: "Contact", href: "#" },
];
---

<Topbar menuItems={menuItems}>
  <div
    slot="logo"
    class={css({
      display: "flex",
      alignItems: "center",
      gap: "sm",
      fontSize: "lg",
      fontWeight: "bold",
    })}
  >
    Pindoba
  </div>
</Topbar>

Custom

Use showThemeModeSelect to hide the built-in theme toggle, menuActiveItem to highlight the current page, and passThrough to override styles on individual slots such as container for layout adjustments.

Without Theme Mode Select

MyApp
Navigation

With Active Menu Item

Pindoba
Select a theme mode
Navigation
Select a theme mode

Custom Bottom Border

Pindoba
Select a theme mode
Navigation
Select a theme mode 
---
import Topbar from "../Topbar.astro";
import type { MenuItem } from "@pindoba/astro-navigation";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const menuItems: MenuItem[] = [
  { label: "Home", href: "#" },
  { label: "Docs", href: "#" },
  { label: "Examples", href: "#" },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    width: "100%",
  })}
>
  <!-- Without theme mode select -->
  <div>
    <h3>Without Theme Mode Select</h3>
    <Topbar menuItems={menuItems} showThemeModeSelect={false}>
      <div
        slot="logo"
        class={css({
          fontSize: "lg",
          fontWeight: "bold",
          color: "primary.700",
        })}
      >
        MyApp
      </div>
    </Topbar>
  </div>

  <!-- Active menu item -->
  <div>
    <h3>With Active Menu Item</h3>
    <Topbar menuItems={menuItems} menuActiveItem="Docs">
      <div
        slot="logo"
        class={css({
          fontSize: "lg",
          fontWeight: "bold",
        })}
      >
        Pindoba
      </div>
    </Topbar>
  </div>

  <!-- Custom bottom border via passThrough -->
  <div>
    <h3>Custom Bottom Border</h3>
    <Topbar
      menuItems={menuItems}
      passThrough={{
        root: css.raw({
          backgroundColor: "primary.sunken",
        }),
      }}
    >
      <div
        slot="logo"
        class={css({
          fontSize: "lg",
          fontWeight: "bold",
          color: "primary.text.contrast.bold",
        })}
      >
        Pindoba
      </div>
    </Topbar>
  </div>
</div>

Props

Prop
menuItems
menuItems

Array of navigation items rendered by the internal Navigation component on both desktop and mobile.

Type MenuItem[]
Default undefined
Required No
menuActiveItem
menuActiveItem

Label of the currently active navigation item. Passed to the internal Navigation component to apply the active style.

Type string
Default undefined
Required No
navigationProps
navigationProps

Props forwarded to both desktop and mobile Navigation components. Use this to customise direction, emphasis, or other Navigation-level options.

Type NavigationProps
Default undefined
Required No
showThemeModeSelect
showThemeModeSelect

Whether to render the built-in ThemeModeSelect toggle in the desktop and mobile extras area.

Type boolean
Default true
Required No
themeModeSelectProps
themeModeSelectProps

Props forwarded to both the desktop and mobile ThemeModeSelect instances.

Type ThemeModeSelectProps
Default undefined
Required No
desktopThemeModeSelectProps
desktopThemeModeSelectProps

Props forwarded exclusively to the desktop ThemeModeSelect instance. Takes precedence over themeModeSelectProps for the desktop placement.

Type ThemeModeSelectProps
Default undefined
Required No
mobileThemeModeSelectProps
mobileThemeModeSelectProps

Props forwarded exclusively to the mobile ThemeModeSelect instance inside the drawer. Takes precedence over themeModeSelectProps for the mobile placement.

Type ThemeModeSelectProps
Default undefined
Required No
mobileDialogProps
mobileDialogProps

Props forwarded to the Dialog used as the mobile navigation drawer. Use this to customise the drawer title, animation, or other dialog-level options.

Type DialogProps
Default undefined
Required No
passThrough
passThrough

Custom Panda CSS style objects applied to individual topbar slots: root, container, actions, misc, or actionsMobile.

Type { root?: SystemStyleObject; container?: SystemStyleObject; actions?: SystemStyleObject; misc?: SystemStyleObject; actionsMobile?: SystemStyleObject }
Default undefined
Required No
...rest
...rest

Standard HTML div attributes passed to the root element.

Type HTMLAttributes<HTMLDivElement>
Default -
Required No
  1. Topbar
    1. Default
    2. Custom
    3. Props