Side Nav | astryx-vue

Usage

SideNav is the navigation landmark along one side of a page. Compose it with SideNavSection, SideNavHeading, and SideNavItem. With collapsible, the bar can shrink to an icon rail. SideNavCollapseButton sits at the top end of the sidebar. Items without an icon are omitted while collapsed. Items with children open in a side menu. The actions slot on SideNavItem sits beside the primary control, outside the link, and is not rendered while the rail is collapsed.

Control it with v-model:is-collapsed. Pass an object to collapsible to hide the built-in button or to set a hotkey such as mod+\\. With resizable, the trailing edge can be dragged. The width starts at 260px and stays between 180px and 480px. The handle hides while the bar is collapsed. Dragging below 160px collapses the bar when collapse is also enabled.

vue

<script setup lang="ts">
import { SideNav, SideNavItem, SideNavSection } from '@astryx-vue/core/SideNav'
import { ref } from 'vue'

const collapsed = ref(false)
</script>

<template>
  <SideNav v-model:is-collapsed="collapsed" collapsible>
    <SideNavSection title="Workspace">
      <SideNavItem href="/home" icon-class="i-carbon-home" label="Home" />
    </SideNavSection>
  </SideNav>
</template>

Anatomy

Element	Description
Product icon and name	Branding area at the top of the nav.
Navigation items	Sections and groups of navigable links.
Collapse/expand toggle	Toggle to collapse or expand the side nav.

Best practices

Guidance	Practice
Do	Give every collapsible item an icon, or it disappears in the rail.
Do	Set `href` when a row both navigates and has children. The label navigates; the chevron collapses.
Do	Turn on `resizable` when people should drag the width. Keep collapse on `v-model:is-collapsed` instead of setting it on both `collapsible` and `resizable`.

Examples

End content

Rows end with a menu, a count, a badge, and supporting text.

Nested items

Settings opens a collapsible group of children.

Header with menu

The heading is an account switcher, with the product name and the current account.

Resizable width

Drag the handle on the trailing edge to change the width. Dragging it narrow collapses the bar and hides the handle.

Usage ​