Components

Blocks

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

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.surface.deep",
        }),
      }}
    >
      <div
        slot="logo"
        class={css({
          fontSize: "lg",
          fontWeight: "bold",
          color: "primary.text.contrast.bold",
        })}
      >
        Pindoba
      </div>
    </Topbar>
  </div>
</div>

Props

props · 10 total
prop type default req description
menuItems MenuItem[] undefined Array of navigation items rendered by the internal Navigation component on both desktop and mobile.
menuActiveItem string undefined Label of the currently active navigation item. Passed to the internal Navigation component to apply the active style.
navigationProps NavigationProps undefined Props forwarded to both desktop and mobile Navigation components. Use this to customise direction, emphasis, or other Navigation-level options.
showThemeModeSelect boolean true Whether to render the built-in ThemeModeSelect toggle in the desktop and mobile extras area.
themeModeSelectProps ThemeModeSelectProps undefined Props forwarded to both the desktop and mobile ThemeModeSelect instances.
desktopThemeModeSelectProps ThemeModeSelectProps undefined Props forwarded exclusively to the desktop ThemeModeSelect instance. Takes precedence over themeModeSelectProps for the desktop placement.
mobileThemeModeSelectProps ThemeModeSelectProps undefined Props forwarded exclusively to the mobile ThemeModeSelect instance inside the drawer. Takes precedence over themeModeSelectProps for the mobile placement.
mobileDialogProps DialogProps undefined Props forwarded to the Dialog used as the mobile navigation drawer. Use this to customise the drawer title, animation, or other dialog-level options.
passThrough { root?: SystemStyleObject; container?: SystemStyleObject; actions?: SystemStyleObject; misc?: SystemStyleObject; actionsMobile?: SystemStyleObject } undefined Custom Panda CSS style objects applied to individual topbar slots: root, container, actions, misc, or actionsMobile.
...rest HTMLAttributes<HTMLDivElement> - Standard HTML div attributes passed to the root element.