Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    AppShell

    The application frame: a collapsible sidebar, a menu drawer on mobile, a top bar and the page content.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { AppShell } from '@bigbang/ui';
    Source
    AppShell.tsx
    Storybook
    AppShell · Playground

    AppShell, NavGroup and NavItem are in the @bigbang/ui package.

    import { AppShell, NavGroup, NavItem } from '@bigbang/ui';
    

    <AppShell
      brand={<Logo />}
      header={<UserMenu />}
      nav={
        <NavGroup label="General">
          <NavItem href="/" label="Home" icon="home" current={path === '/'} render={<RouterLink to="/" />} />
        </NavGroup>
      }
    >
      <Outlet />
    </AppShell>;

    Props

    Section titled “Props”

    AppShell

    Section titled “AppShell”
    navRequired
    Description
    The navigation: NavGroup and NavItem parts. It is shown in the sidebar and, below 1024 px, in the menu drawer.
    Type
    ReactNode
    childrenRequired
    Description
    The page content, rendered in main.
    Type
    ReactNode
    brand
    Description
    Product name or logo at the top of the sidebar and the drawer.
    Type
    ReactNode
    header
    Description
    Content of the top bar, such as a search button and the user menu.
    Type
    ReactNode
    collapsed
    Description
    Whether the sidebar is narrowed to icons when you control it. Use it with onCollapsedChange.
    Type
    boolean
    defaultCollapsed
    Description
    Whether the sidebar starts narrowed to icons when you do not control it.
    Type
    boolean
    Default
    false
    onCollapsedChange
    Description
    Called when the user narrows or widens the sidebar. The shell stores nothing itself: to keep the state across pages, save it here under the app's own preference and consent rules and pass it back as defaultCollapsed.
    Type
    (collapsed: boolean) => void
    shortcut
    Description
    Ctrl+B (Cmd+B on macOS) narrows or widens the sidebar. It never fires while focus is in a text field, a select or editable content, where the keys belong to the field. Set to false when the app uses the keys for something else.
    Type
    boolean
    Default
    true
    label
    Description
    Name of the navigation landmark. Defaults to "Ana menü" or "Main menu" from the Provider.
    Type
    string
    mainId
    Description
    Id of the main element, the target of the skip link.
    Type
    string
    Default
    'main'
    variant
    Description
    docked puts the content beside the sidebar on the page fill. inset floats the top bar and content as a raised, rounded panel on the sidebar fill from 1024 px.
    Type
    'inset' | 'docked'
    Default
    'docked'
    material
    Description
    'solid' keeps the top bar and the inset sidebar solid under a glass Provider. The menu drawer is always solid.
    Type
    'auto' | 'solid'
    Default
    'auto'
    className
    Description
    For layout only: placement. The shell fills the viewport height.
    Type
    string
    Section titled “NavGroup”
    labelRequired
    Description
    Heading of the group, such as "Yönetim". In the narrow sidebar it is kept for screen readers only.
    Type
    string
    childrenRequired
    Description
    NavItem parts.
    Type
    ReactNode
    collapsible
    Description
    Lets the user fold the group with its heading. The group stays open in the narrow sidebar.
    Type
    boolean
    Default
    false
    defaultOpen
    Description
    Whether a collapsible group starts open.
    Type
    boolean
    Default
    true
    Section titled “NavItem”
    hrefRequired
    Description
    Destination: a relative path or an https: URL.
    Type
    string
    labelRequired
    Description
    Visible name of the page. In the narrow sidebar it is kept for screen readers and shown as a native tooltip.
    Type
    string
    icon
    Description
    Registered icon name. Give every item an icon so the narrow sidebar stays usable.
    Type
    IconName
    current
    Description
    Marks the item as the current page: aria-current="page", the selected fill and the sliding indicator.
    Type
    boolean
    Default
    false
    badge
    Description
    A count after the label, such as unread items. It is part of the link's name.
    Type
    number
    render
    Description
    Renders the link with the router's link component, such as <RouterLink to="/ayarlar" />.
    Type
    ReactElement | ComponentRenderFn<HTMLProps, {}>

    Data attributes

    Section titled “Data attributes”
    • data-component="app-shell" and data-collapsed while collapsed: on the root.
    • data-part="sidebar", "header", "drawer", "skip-link", "collapse", "indicator": on the parts.
    • data-component="nav-group" and data-component="nav-item": on the navigation parts.