显示侧边栏

侧边栏

使用侧边栏导航布局，让应用内容始终处于核心位置。

<head>    <!-- ... -->    @fluxAppearance</head><body class="min-h-screen bg-white dark:bg-zinc-800">    <flux:sidebar sticky collapsible="mobile" class="bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700">        <flux:sidebar.header>            <flux:sidebar.brand                href="#"                logo="https://fluxui.dev/img/demo/logo.png"                logo:dark="https://fluxui.dev/img/demo/dark-mode-logo.png"                name="Acme Inc."            />            <flux:sidebar.collapse class="lg:hidden" />        </flux:sidebar.header>        <flux:sidebar.search placeholder="Search..." />        <flux:sidebar.nav>            <flux:sidebar.item icon="home" href="#" current>Home</flux:sidebar.item>            <flux:sidebar.item icon="inbox" badge="12" href="#">Inbox</flux:sidebar.item>            <flux:sidebar.item icon="document-text" href="#">Documents</flux:sidebar.item>            <flux:sidebar.item icon="calendar" href="#">Calendar</flux:sidebar.item>            <flux:sidebar.group expandable heading="Favorites" class="grid">                <flux:sidebar.item href="#">Marketing site</flux:sidebar.item>                <flux:sidebar.item href="#">Android app</flux:sidebar.item>                <flux:sidebar.item href="#">Brand guidelines</flux:sidebar.item>            </flux:sidebar.group>        </flux:sidebar.nav>        <flux:sidebar.spacer />        <flux:sidebar.nav>            <flux:sidebar.item icon="cog-6-tooth" href="#">Settings</flux:sidebar.item>            <flux:sidebar.item icon="information-circle" href="#">Help</flux:sidebar.item>        </flux:sidebar.nav>        <flux:dropdown position="top" align="start" class="max-lg:hidden">            <flux:sidebar.profile avatar="https://fluxui.dev/img/demo/user.png" name="Olivia Martin" />            <flux:menu>                <flux:menu.radio.group>                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                    <flux:menu.radio>Truly Delta</flux:menu.radio>                </flux:menu.radio.group>                <flux:menu.separator />                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>            </flux:menu>        </flux:dropdown>    </flux:sidebar>    <flux:header class="lg:hidden">        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />        <flux:spacer />        <flux:dropdown position="top" alignt="start">            <flux:profile avatar="https://fluxui.dev/img/demo/user.png" />            <flux:menu>                <flux:menu.radio.group>                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                    <flux:menu.radio>Truly Delta</flux:menu.radio>                </flux:menu.radio.group>                <flux:menu.separator />                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>            </flux:menu>        </flux:dropdown>    </flux:header>    <flux:main>        <flux:heading size="xl" level="1">Good afternoon, Olivia</flux:heading>        <flux:text class="mb-6 mt-2 text-base">Here's what's new today</flux:text>        <flux:separator variant="subtle" />    </flux:main>    @fluxScripts</body>

次级页头

使用顶部页头承载次级导航。

全屏

<head>    <!-- ... -->    @fluxAppearance</head><body class="min-h-screen bg-white dark:bg-zinc-800">    <flux:sidebar sticky collapsible="mobile" class="bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700">        <flux:sidebar.header>            <flux:sidebar.brand                href="#"                logo="https://fluxui.dev/img/demo/logo.png"                logo:dark="https://fluxui.dev/img/demo/dark-mode-logo.png"                name="Acme Inc."            />            <flux:sidebar.collapse class="lg:hidden" />        </flux:sidebar.header>        <flux:sidebar.search placeholder="Search..." />        <flux:sidebar.nav>            <flux:sidebar.item icon="home" href="#" current>Home</flux:sidebar.item>            <flux:sidebar.item icon="inbox" badge="12" href="#">Inbox</flux:sidebar.item>            <flux:sidebar.item icon="document-text" href="#">Documents</flux:sidebar.item>            <flux:sidebar.item icon="calendar" href="#">Calendar</flux:sidebar.item>            <flux:sidebar.group expandable heading="Favorites" class="grid">                <flux:sidebar.item href="#">Marketing site</flux:sidebar.item>                <flux:sidebar.item href="#">Android app</flux:sidebar.item>                <flux:sidebar.item href="#">Brand guidelines</flux:sidebar.item>            </flux:sidebar.group>        </flux:sidebar.nav>        <flux:sidebar.spacer />        <flux:sidebar.nav>            <flux:sidebar.item icon="cog-6-tooth" href="#">Settings</flux:sidebar.item>            <flux:sidebar.item icon="information-circle" href="#">Help</flux:sidebar.item>        </flux:sidebar.nav>        <flux:dropdown position="top" align="start" class="max-lg:hidden">            <flux:sidebar.profile avatar="https://fluxui.dev/img/demo/user.png" name="Olivia Martin" />            <flux:menu>                <flux:menu.radio.group>                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                    <flux:menu.radio>Truly Delta</flux:menu.radio>                </flux:menu.radio.group>                <flux:menu.separator />                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>            </flux:menu>        </flux:dropdown>    </flux:sidebar>    <flux:header class="block! bg-white lg:bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">        <flux:navbar class="lg:hidden w-full">            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />            <flux:spacer />            <flux:dropdown position="top" align="start">                <flux:profile avatar="https://fluxui.dev/img/demo/user.png" />                <flux:menu>                    <flux:menu.radio.group>                        <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                        <flux:menu.radio>Truly Delta</flux:menu.radio>                    </flux:menu.radio.group>                    <flux:menu.separator />                    <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>                </flux:menu>            </flux:dropdown>        </flux:navbar>        <flux:navbar scrollable>            <flux:navbar.item href="#" current>Dashboard</flux:navbar.item>            <flux:navbar.item badge="32" href="#">Orders</flux:navbar.item>            <flux:navbar.item href="#">Catalog</flux:navbar.item>            <flux:navbar.item href="#">Configuration</flux:navbar.item>        </flux:navbar>    </flux:header>    <flux:main>        <flux:heading size="xl" level="1">Good afternoon, Olivia</flux:heading>        <flux:text class="mb-6 mt-2 text-base">Here's what's new today</flux:text>        <flux:separator variant="subtle" />    </flux:main>    @fluxScripts</body>

可折叠侧边栏

使用可折叠侧边栏，让应用显得更为宽敞。

全屏

<head>    <!-- ... -->    @fluxAppearance</head><body class="min-h-screen bg-white dark:bg-zinc-800">    <flux:sidebar sticky collapsible class="bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700">        <flux:sidebar.header>            <flux:sidebar.brand                href="#"                logo="https://fluxui.dev/img/demo/logo.png"                logo:dark="https://fluxui.dev/img/demo/dark-mode-logo.png"                name="Acme Inc."            />            <flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" />        </flux:sidebar.header>        <flux:sidebar.nav>            <flux:sidebar.item icon="home" href="#" current>Home</flux:sidebar.item>            <flux:sidebar.item icon="inbox" badge="12" href="#">Inbox</flux:sidebar.item>            <flux:sidebar.item icon="document-text" href="#">Documents</flux:sidebar.item>            <flux:sidebar.item icon="calendar" href="#">Calendar</flux:sidebar.item>            <flux:sidebar.group expandable icon="star" heading="Favorites" class="grid">                <flux:sidebar.item href="#">Marketing site</flux:sidebar.item>                <flux:sidebar.item href="#">Android app</flux:sidebar.item>                <flux:sidebar.item href="#">Brand guidelines</flux:sidebar.item>            </flux:sidebar.group>        </flux:sidebar.nav>        <flux:sidebar.spacer />        <flux:sidebar.nav>            <flux:sidebar.item icon="cog-6-tooth" href="#">Settings</flux:sidebar.item>            <flux:sidebar.item icon="information-circle" href="#">Help</flux:sidebar.item>        </flux:sidebar.nav>        <flux:dropdown position="top" align="start" class="max-lg:hidden">            <flux:sidebar.profile avatar="https://fluxui.dev/img/demo/user.png" name="Olivia Martin" />            <flux:menu>                <flux:menu.radio.group>                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                    <flux:menu.radio>Truly Delta</flux:menu.radio>                </flux:menu.radio.group>                <flux:menu.separator />                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>            </flux:menu>        </flux:dropdown>    </flux:sidebar>    <flux:header class="lg:hidden">        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />        <flux:spacer />        <flux:dropdown position="top" align="start">            <flux:profile avatar="/img/demo/user.png" />            <flux:menu>                <flux:menu.radio.group>                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>                    <flux:menu.radio>Truly Delta</flux:menu.radio>                </flux:menu.radio.group>                <flux:menu.separator />                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>            </flux:menu>        </flux:dropdown>    </flux:header>    <flux:main>        <flux:heading size="xl" level="1">Good afternoon, Olivia</flux:heading>        <flux:text class="mt-2 mb-6 text-base">Here's what's new today</flux:text>        <flux:separator variant="subtle" />    </flux:main>    @fluxScripts</body>

参考

flux:sidebar

属性	描述
sticky	启用后，在滚动时让侧边栏保持固定。
collapsible	控制侧边栏的折叠行为。可选值："mobile"（仅移动端）、true（移动端与桌面端均可）、false（从不折叠）。
breakpoint	控制移动端/桌面端行为的视口断点。可接受像素值（1024、"1024px"）或 rem 值（"64rem"）。默认值为 1024。若使用 lg:hidden 等响应式类，请确保它们与自定义断点保持一致以避免偏移。若需精确控制，可使用会自动遵循设定断点的数据属性选择器（例如 lg:hidden）。
stashable	已废弃。请改用 collapsible="mobile"。在小屏幕上启用后，可切换侧边栏的显示与隐藏。
persist	控制折叠状态是否保存到 localStorage。默认值为 true（桌面端折叠状态将在会话之间保留）。将其设为 false 可关闭持久化。

插槽	描述
default	侧边栏中展示的内容，通常包含页头、导航与页脚部分。

CSS	描述
class	应用到侧边栏的附加 CSS 类。常见用法：bg-zinc-50、border-r 等。

flux:sidebar.header

插槽	描述
default	侧边栏页头的内容，通常包含品牌区域与折叠按钮。

CSS	描述
class	应用到页头容器的附加 CSS 类。

flux:sidebar.brand

属性	描述
href	点击品牌时要跳转的 URL。
logo	Logo 图像的 URL 或路径。
logo:dark	暗色模式下 Logo 图像的 URL 或路径。
name	显示在 Logo 旁的品牌名称。

CSS	描述
class	应用到品牌链接的附加 CSS 类。

flux:sidebar.collapse

属性	描述
inset	折叠按钮的位置。可使用空格分隔的值，如 "left"、"right"、"top"、"bottom"，或类似 "left top bottom" 的组合。
tooltip	鼠标悬停时显示的提示文字。默认值为 "Toggle sidebar"。

CSS	描述
class	应用到折叠按钮的附加 CSS 类。

flux:sidebar.search

属性	描述
placeholder	搜索输入框的占位提示文本。

CSS	描述
class	应用到搜索容器的附加 CSS 类。

flux:sidebar.nav

属性	描述
placeholder	要展示的导航项与分组。

CSS	描述
class	应用到导航容器的附加 CSS 类。

flux:sidebar.item

属性	描述
href	点击该项时要跳转的 URL。
icon	显示在条目文本前的图标。
badge	显示在条目右侧的徽标数值。
current	启用后，标识该条目为当前激活状态。
tooltip	侧边栏折叠时显示的提示文字，默认等同于条目文本。

插槽	描述
default	导航条目的文本内容。

CSS	描述
class	应用到条目链接的附加 CSS 类。

flux:sidebar.group

属性	描述
heading	分组的标题文本。
expandable	启用后，允许该分组展开或折叠。
icon	显示在分组标题前的图标，用以替换默认的尖括号图标。若不指定图标，侧边栏折叠时该分组会被隐藏。
expanded	控制初始展开状态，默认为 true。

插槽	描述
default	该分组内的导航条目。

CSS	描述
class	应用到分组容器的附加 CSS 类。

flux:sidebar.spacer

CSS	描述
class	应用到间隔元素的附加 CSS 类。

flux:sidebar.profile

属性	描述
avatar	用户头像图像的 URL 或路径。
name	用户的显示名称。

CSS	描述
class	应用到用户资料容器的附加 CSS 类。

flux:sidebar.toggle

属性	描述
icon	切换按钮上的图标，例如 bars-2、x-mark。
inset	切换按钮的位置，例如 left。

CSS	描述
class	应用到切换按钮的附加 CSS 类。常见用法：添加 lg:hidden 以仅在移动端显示。

flux:main

属性	描述
container	启用后，将主体内容限制在容器宽度内。

插槽	描述
default	主内容区域内要显示的内容。

侧边栏

相关组件

参考