Layout Showcase
used for parent of entire site such as www.sveltekit-ui.com
Component Documentation
Component Name
Layout
Builder Function Name
create_layout_manager
Description
manages a high-level app layout with nav bar, optional full navigation panel, confetti effects, dark theme toggling, and more
Use like example
Config
| 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 | [object Object] | defines screen width breakpoints for layout adjustments |
| favicons | object | optionally contains { favicon, favicon_inactive }, updated on document visibility change |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| handle_scroll | marks that user is scrolling; sets is_at_top=false, is_at_bottom=false, etc. | No Params | void |
| handle_scrollend | detects if scrolled to top/bottom at scroll end, updates manager states | No Params | void |
| set_base_theme | checks document.dataset.theme or system preference, sets is_dark_theme accordingly | No Params | void |
| set_is_at_top | manually sets is_at_top to given boolean | input: boolean | void |
| set_is_at_bottom | manually sets is_at_bottom to given boolean | input: boolean | void |
| set_theme | updates is_dark_theme and sets the theme data attribute/cookie | is_dark_theme_input: boolean | void |
| set_full_nav_height | stores the measured height of the full nav panel (used for responsiveness checks) | input: number | void |
| set_is_full_nav_toggled_on | sets whether the full navigation panel is open | input: boolean | void |
| set_screen_height | updates the overall screen height in the manager | input: number | void |
| set_screen_width | updates the overall screen width in the manager | input: number | void |
| set_nav_bar_height | updates the nav bar’s current pixel height | input: number | void |
| set_is_navigating | indicates a route transition is in progress (shows a loading overlay, etc.) | input: boolean | void |
| to_home | convenience method to navigate user to '/' using svelte's goto | No Params | void |
| goto_path | navigates user to a given route, closes full nav if open | slashed_path: string (ex: '/about') | void |
| init | constructs the layout manager, setting initial states, creating sub-managers for alerts, confetti, dark theme switch, etc. | config: object | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| is_dark_theme | boolean | true if the current theme is dark |
| favicons | object | contains { favicon, favicon_inactive } for dynamic updates |
| breakpoints | object | derived state with booleans for sm, md, lg, xl, xxl |
| full_nav_links | array | an array of link objects for a full nav panel |
| nav_bar_links | array | link objects for a top nav bar |
| is_show_hamburger | boolean | if true, shows a hamburger icon to toggle full nav |
| screen_width | number | the current window width |
| screen_height | number | the current window height |
| is_all_nav_bar_hidden | boolean | true if the entire nav bar is forcibly hidden |
| shown_nav_bar_height | number or null | the current nav bar height if visible, else null |
| is_nav_bar_hidable_from_scroll | boolean | allows nav bar to hide on scroll down |
| is_nav_bar_hidden_from_scroll | boolean | the current scroll state: nav is hidden or not |
| is_nav_bar_shown | boolean | true if the nav bar is currently displayed |
| is_full_nav_prevented | boolean | disables opening the full nav |
| is_full_nav_toggled_on | boolean | state of the full nav toggle |
| is_full_nav_shown | boolean | true if the full nav is actually displayed |
| nav_bar_height | number or null | the measured nav bar height in px |
| border_radius | number | general border radius for nav styling |
| nav_margin_x | number | horizontal margin for the nav |
| nav_margin_top | number | top margin for the nav |
| nav_margin_bottom | number | bottom margin for the nav |
| nav_main_padding_y | number | vertical padding inside the nav bar |
| nav_main_padding_x | number | horizontal padding inside the nav bar |
| is_navigating | boolean | true if the app is in the middle of a page navigation |
| client_interface | object or null | data from get_user_interface if screen size is known |
| breakpoint_splits | object | holds the numeric widths for sm, md, lg, xl |
| nav_link_clicks | number | count of how many nav links have been clicked |
| is_at_top | boolean | true if user has scrolled to the top of the page |
| is_at_bottom | boolean | true if user has scrolled to the bottom of the page |
| hovered_route_name | string or null | the route name over which the user is currently hovering |
| available_content_height | number | calculated screen height minus shown nav bar height |
| full_nav_height | number or null | the measured height of the full nav |
| is_full_nav_large | boolean | true if the full nav is over half the available screen content height |
| confetti_manager | object | manages confetti display with a full screen overlay |
| alert_manager | object | manages global alerts |
| dark_theme_manager | object | a dark_theme checkbox manager controlling is_dark_theme |
