The Navbar component is used to build a responsive navigation header that can include branding, navigation items, and interactive controls.

It is designed to work seamlessly with responsive layouts, drawers, and mobile navigation patterns.

• Responsive behavior: Supports adaptive layouts for mobile and desktop.
• Composable structure: Uses slots/snippets for logo and navigation items.
• Mobile-ready: Integrates with togglers and drawers.
• Sticky or static modes: Can remain fixed or scroll with content.

Usage Example

Preview

active test1 test2

LoGo

active test1 test2

navFree

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam tenetur voluptates odit illum, autem, alias perspiciatis numquam tempora sequi voluptate, iste recusandae nesciunt suscipit. Quasi ipsa dolore tempora ea tempore!

Scroll Down

Scroll down to see the sticky effect.

header

active test1 test2

active test1 test2

LoGo

navSticky

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam tenetur voluptates odit illum, autem, alias perspiciatis numquam tempora sequi voluptate, iste recusandae nesciunt suscipit. Quasi ipsa dolore tempora ea tempore!

Code

<script lang="ts">
  import {
    Card,
    Drawer,
    HoverFollower,
    Navbar,
    themeConfig,
    useMediaQuery,
    Window
  } from "@fefade-ui/svelte"

  let isOpen = $state({
    1: false,
    2: false
  })

  const isMd = useMediaQuery("max-width", "md")
  const theme = $derived(themeConfig())
</script>

{#snippet logo()}
  <h4 style="margin: 0;">
    Lo<span style="color: aqua;">Go</span>
  </h4>
{/snippet}

{#snippet contentMain(s: string)}
  <main style="min-height: 100vh; width: 80%; margin: 3rem auto;">
    <h2>{s}</h2>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam tenetur
      voluptates odit illum, autem, alias perspiciatis numquam tempora sequi
      voluptate, iste recusandae nesciunt suscipit. Quasi ipsa dolore tempora ea
      tempore!
    </p>
  </main>
{/snippet}

{#snippet navItems()}
  <HoverFollower
    bgColor={theme.colors.success}
    orientation={isMd.value ? "vertical" : "horizontal"}
  >
    <Navbar.Item aria-current="page">active</Navbar.Item>
    <Navbar.Item>test1</Navbar.Item>
    <Navbar.Item>test2</Navbar.Item>
  </HoverFollower>
{/snippet}

<div style="display: flex; flex-direction: column; gap: 1rem;">
  <Window
    style="
  max-width: 500px;
  overflow: auto;
  position: relative;
  "
  >
    <Drawer.Overlay
      isOpen={isOpen[1]}
      style="position: absolute; z-index: 1;"
      onclick={() => {
        isOpen[1] = false
      }}
    />
    <Drawer isOpen={isOpen[1]} style="position: absolute; z-index: 2;">
      <Drawer.Content style="overflow: hidden; min-height: 100vh;">
        {@render navItems()}
      </Drawer.Content>
    </Drawer>

    <Navbar
      id="navFree"
      style="
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 0;
        "
    >
      {@render logo?.()}

      <div style="flex:1;"></div>

      {#if !isMd.value}
        {@render navItems()}
      {/if}

      <Navbar.Toggler
        id="toggler-1"
        onchange={() => {
          isOpen[1] = !isOpen[1]
        }}
        checked={isOpen[1]}
      />
    </Navbar>
    {@render contentMain?.("navFree")}
  </Window>

  <Window
    style="
  max-height: 500px;
  max-width: 500px;
  overflow: auto;
  position: relative;
  "
  >
    <div style="text-align: center; margin: 5rem 0;">
      <h2>Scroll Down</h2>
      <p>Scroll down to see the sticky effect.</p>
    </div>

    <Drawer.Overlay
      isOpen={isOpen[2]}
      style="
    position: absolute;
    min-height: calc(100vh + 550px);
    z-index: 2;
    "
      onclick={() => {
        isOpen[2] = false
      }}
    />
    <Drawer
      isOpen={isOpen[2]}
      style="
    position: absolute;
    min-height: calc(100vh + 550px);
    z-index: 3;
    width: 100%;
    "
    >
      <Drawer.Header
        handleClose={() => {
          isOpen[2] = false
        }}
      >
        <h4>header</h4>
      </Drawer.Header>
      <Drawer.Content style="overflow: hidden;">
        {@render navItems()}
      </Drawer.Content>
    </Drawer>

    <Navbar
      id="navSticky"
      style="
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 0;
        z-index: 1;
        "
      isTranslucent
    >
      <Navbar.Toggler
        id="toggler-2"
        onchange={() => {
          isOpen[2] = !isOpen[2]
        }}
        checked={isOpen[2]}
      />
      {#if !isMd.value}
        {@render navItems()}
      {/if}
      <div style="flex: 1;"></div>
      {@render logo?.()}
    </Navbar>

    <Card style="background: {theme.colors.warning};">
      {@render contentMain?.("navSticky")}
    </Card>
  </Window>
</div>

Props

Navbar

Prop	Type	Default	Description
id	string	—	Unique identifier for the navbar instance.
isTranslucent	boolean	false	Applies a translucent background style.
style	string	—	Inline style overrides for layout customization.
class	string	—	Optional additional CSS classes.

Navbar.Item

Prop	Type	Default	Description
aria-current	string	—	Indicates the active navigation item.
class	string	—	Custom styling for individual items.

Navbar.Toggler

Prop	Type	Default	Description
id	string	—	Unique identifier for toggler state control.
checked	boolean	—	Controls whether the navigation drawer is open.
onchange	function	—	Callback triggered when toggler state changes.

Best Practices

• Use Navbar.Toggler for mobile navigation control.
• Keep navigation items minimal and meaningful.
• Combine with Drawer for responsive mobile menus.
• Use isTranslucent only when background context supports readability.
• Ensure active states are clearly indicated using aria-current.