Navigation

GlassAppBar

A top application bar with glass blur and leading, content and trailing slots.

<script>
  import { GlassAppBar, IconButton } from "@codeatlasdev/ui";
</script>

<GlassAppBar>
  My Application
  {#snippet trailing()}<IconButton aria-label="Search">...</IconButton>{/snippet}
</GlassAppBar>

Renders a <header>. Icon-only buttons inside it need an aria-label. Inside AppShell use the shell’s own header; this bar is for standalone pages.

#151

Default

Content in the middle and actions in the trailing slot.

My Application

Reference #151 · Pick in the gallery

Code

<script lang="ts">
  import { GlassAppBar, IconButton, Avatar, Card } from '@codeatlasdev/ui';
  import { Search, Bell } from '@lucide/svelte';
</script>

<Card material="glass" full flush>
  <GlassAppBar>
    <span class="title">My Application</span>
    {#snippet trailing()}
      <IconButton aria-label="Search"><Search size={18} /></IconButton>
      <IconButton aria-label="Notifications"><Bell size={18} /></IconButton>
      <Avatar alt="Ada L" size="sm" />
    {/snippet}
  </GlassAppBar>
</Card>

<style>
  .title { font-weight: 600; color: var(--ca-text-primary); }
</style>

#152

With leading icon

A menu button in the leading slot.

Dashboard

Reference #152 · Pick in the gallery

Code

<script lang="ts">
  import { GlassAppBar, Button, IconButton, Avatar, Card } from '@codeatlasdev/ui';
  import { Menu } from '@lucide/svelte';
</script>

<Card material="glass" full flush>
  <GlassAppBar>
    <span class="title">Dashboard</span>
    {#snippet leading()}<IconButton aria-label="Open menu"><Menu size={20} /></IconButton>{/snippet}
    {#snippet trailing()}
      <Button size="sm" variant="filled">Upgrade</Button>
      <Avatar alt="Carlos M" size="sm" />
    {/snippet}
  </GlassAppBar>
</Card>

<style>
  .title { font-weight: 600; color: var(--ca-text-primary); }
</style>

Props

Prop	Type	Default	Description
`children`	`Snippet`	–	Main content, for example the title.
`leading`	`Snippet`	–	Content at the start, usually a menu button.
`trailing`	`Snippet`	–	Content at the end, usually actions and an avatar.
`class`	`string`	`''`	Extra CSS classes.