Components / Foundations

Layout

Component + manager

Manages a high-level app layout with nav bar, optional full navigation panel, confetti effects, dark theme toggling, and more.

Preview

Usage

API reference

Live preview

Interactive example

You’re using it right now.

One home for your site’s shared UI.

Layout brings navigation, theme switching, notifications, and page content together. Try the menu and theme switch in this site’s header.

NavigationPage contentThemeNotifications

Usage

Import the component and its manager, then make it your own.

ComponentLayout

Managercreate_layout_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Layout, create_layout_manager } from "sveltekit-ui"

  const manager = create_layout_manager({
    is_dark_theme: false,
    is_show_hamburger: true,
  })
</script>

<Layout {manager}>
  {#snippet nav_bar_logo()}<strong>My workspace</strong>{/snippet}
  {#snippet nav_bar_extra()}<a href="#projects">Projects</a>{/snippet}
  {#snippet full_nav()}
    <a href="#projects" onclick={() => manager.set_is_full_nav_toggled_on(false)}>All projects</a>
  {/snippet}
  {#snippet content()}
    <section id="projects" style="padding: 2rem;">
      <h1>Projects</h1><p>Your workspace content goes here.</p>
    </section>
  {/snippet}
</Layout>

API reference

Configure the manager, call its methods, and read its reactive state.

17 entries in configuration

Property	Type	Default	Description
`is_dark_theme`	`boolean`	`true`	sets the initial dark/light theme mode
`full_nav_links`	`array`	`[]`	an array of link objects for the full navigation panel
`nav_bar_links`	`array`	`[]`	an array of link objects for a simplified or top nav bar
`is_show_hamburger`	`boolean`	`true`	if true, displays a hamburger menu icon for toggling full nav
`is_all_nav_bar_hidden`	`boolean`	`false`	completely hides the nav bar if true
`is_nav_bar_hidable_from_scroll`	`boolean`	`false`	if true, allows the nav bar to hide on downward scrolling
`is_nav_bar_hidden_from_scroll`	`boolean`	`false`	indicates whether the nav bar is currently hidden from scroll
`is_full_nav_prevented`	`boolean`	`false`	prevents the user from opening the full nav if true
`is_full_nav_toggled_on`	`boolean`	`false`	if true, the full nav panel is open
`border_radius`	`number`	`0`	border radius for certain nav bar styling, in rem
`nav_margin_x`	`number`	`0`	horizontal margin for the nav bar
`nav_margin_top`	`number`	`0`	top margin for the nav bar
`nav_margin_bottom`	`number`	`0`	bottom margin for the nav bar
`nav_main_padding_y`	`number`	`0.5`	vertical padding inside the nav bar
`nav_main_padding_x`	`number`	`1`	horizontal padding inside the nav bar
`breakpoint_splits`	`object`	`{"sm":480,"md":768,"lg":1024,"xl":1200}`	defines screen width breakpoints for layout adjustments
`favicons`	`object`	`null`	optionally contains { favicon, favicon_inactive }, updated on document visibility change