App Bar

Preview

About

A frosted (blurred) top bar that responds to the breakpoint: on mobile/tablet it's the page bar (title + back + orbs), on desktop (≥1024px) it becomes the application bar (KasyAppBar.application) with search, quick create, notifications, and avatar.

• style (default constructor, mobile): subpage (back + title + theme toggle), subpageSimple (back + title only), subpageActions (back + title + custom trailing), rootTab (title + theme, no back)
• title / titleWidget: text or a custom widget in the center (e.g. the logo on Home)
• onBack, leading, trailing: override the default controls
• hideOnScroll: the bar slides away on scroll down and comes back on scroll up (synced with the bottom menu)
• KasyAppBar.application(...): desktop chrome — searchController/onSearchChanged, onCreate/createLabel, onNotifications/showNotificationBadge, avatar/showAvatar, onToggleTheme, flags showSearch/showNotifications/showCreate
• KasyAppBar.fromConfig(config): builds the application bar from a KasyAppBarConfig published by the screen

KasyOverlayScaffold combines the bar with a scrollable CustomScrollView underneath (the "underlap" pattern), including the subpage header on desktop when the side menu already occupies the top.

Last updated on 08/23/2026