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.

AstroReactSvelteVue

PreviewCode

Pindoba

---
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>

import { Topbar } from "../Topbar";

export default function DefaultDemo() {
  return (
    <Topbar
      menuItems={[
        { label: "Home", href: "#" },
        { label: "Docs", href: "#" },
        { label: "Blog", href: "#" },
      ]}
      menuActiveItem="Home"
    />
  );
}

<script lang="ts">
  import Topbar from "../topbar.svelte";

  const menuItems = [
    { label: "Home", href: "#" },
    { label: "Docs", href: "#" },
    { label: "Blog", href: "#" },
  ];
</script>

<Topbar {menuItems} menuActiveItem="Home" />

<script setup lang="ts">
import { Topbar } from "@pindoba/vue-topbar";

const menuItems = [
  { label: "Home", href: "#" },
  { label: "Docs", href: "#" },
  { label: "Blog", href: "#" },
];
</script>

<template>
  <Topbar :menuItems="menuItems" menuActiveItem="Home" />
</template>

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.

PreviewCode

Without Theme Mode Select

MyApp

With Active Menu Item

Pindoba

Custom Bottom Border

Pindoba

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

#Default

#Custom

Without Theme Mode Select

With Active Menu Item

Custom Bottom Border

Default

Custom