Skip to main content

​
Overview

AxSideNav is a full-featured sidebar component that supports collapsible groups, section labels, dividers, and automatic mobile navigation. It includes a built-in mobile bottom tab bar that displays the first 4 items with overflow behind a “More” menu.

​
Import

import AxSideNav from "axmed-design-system"
import type { NavItem, NavDivider, NavGroup, NavSection } from "axmed-design-system"

​
Basic Usage

import { DashboardOutlined, ShoppingCartOutlined, SettingOutlined } from "@ant-design/icons"

const items = [
  { key: "dashboard", label: "Dashboard", icon: <DashboardOutlined /> },
  {
    type: "group",
    key: "orders",
    label: "Orders",
    icon: <ShoppingCartOutlined />,
    children: [
      { key: "orders-all", label: "All Orders" },
      { key: "orders-pending", label: "Pending" },
    ],
  },
  { type: "divider", key: "div-1" },
  { key: "settings", label: "Settings", icon: <SettingOutlined /> },
]

function AppSidebar() {
  const [collapsed, setCollapsed] = useState(false)
  const [selected, setSelected] = useState("dashboard")

  return (
    <AxSideNav
      items={items}
      selectedKey={selected}
      collapsed={collapsed}
      onCollapse={setCollapsed}
      logo={<YourLogo />}
      user={<UserProfile />}
    />
  )
}

​
Props

​
items
(NavItem | NavDivider | NavGroup | NavSection)[]
required
Navigation items array. Can include regular items, dividers, collapsible groups, and section labels.
​
selectedKey
string
Key of the currently active item. Used to highlight the active navigation item.
​
collapsed
boolean
default:"false"
Whether the sidebar is collapsed to icon-only mode. When collapsed, labels are hidden and items show tooltips on hover.
​
onCollapse
(collapsed: boolean) => void
Callback when the user toggles collapse state via the built-in toggle button.
Logo or brand element rendered at the top of the sidebar.
​
user
React.ReactNode
User profile element pinned to the bottom of the sidebar.
​
width
number
default:240
Sidebar width in pixels when expanded.
​
collapsedWidth
number
default:64
Sidebar width in pixels when collapsed to icon-only mode.
​
hideCollapseButton
boolean
default:false
Hide the built-in collapse toggle button in the logo area. Use when AxHeader provides the toggle instead.
​
userActions
(ActionItem | ActionDivider)[]
Action menu items shown when clicking the user area. When provided, wraps the user slot with a dropdown menu (e.g., My Account, Settings, Log Out).
​
showMobileNav
boolean
default:true
Show a fixed bottom tab bar on mobile (< 768px) instead of the sidebar. The first 4 top-level items appear as tabs; overflow items go behind a “More” menu.
​
className
string
Additional CSS class name.
​
style
React.CSSProperties
Inline styles.

​
Item Types

​
NavItem

type NavItem = {
  type?: never
  key: string
  label: string
  icon: React.ReactNode
  onClick?: () => void
  disabled?: boolean
}

​
NavGroup

Collapsible group with text-only children. Expands/collapses inline when sidebar is open. Shows a popover flyout when sidebar is collapsed. 
type NavGroup = {
  type: "group"
  key: string
  label: string
  icon: React.ReactNode
  children: NavItem[]
  defaultOpen?: boolean
}

​
NavDivider

type NavDivider = {
  type: "divider"
  key: string
}

​
NavSection

Static section label (non-interactive, visually groups items). Hidden when sidebar is collapsed. 
type NavSection = {
  type: "section"
  key: string
  label: string
}

​
Examples

​
With Collapsible Groups

const items = [
  { type: "section", key: "sec-main", label: "Main" },
  { key: "dashboard", label: "Dashboard", icon: <DashboardOutlined /> },
  {
    type: "group",
    key: "orders",
    label: "Orders",
    icon: <ShoppingCartOutlined />,
    defaultOpen: true,
    children: [
      { key: "orders-all", label: "All Orders", onClick: () => navigate("/orders") },
      { key: "orders-pending", label: "Pending", onClick: () => navigate("/orders/pending") },
      { key: "orders-completed", label: "Completed", onClick: () => navigate("/orders/completed") },
    ],
  },
  { type: "divider", key: "div-1" },
  { key: "settings", label: "Settings", icon: <SettingOutlined /> },
]

​
With User Actions Menu

import { UserOutlined, LogoutOutlined } from "@ant-design/icons"

const userActions = [
  { key: "account", label: "My Account", icon: <UserOutlined /> },
  { key: "settings", label: "Settings", icon: <SettingOutlined /> },
  { type: "divider" },
  { key: "logout", label: "Log Out", icon: <LogoutOutlined />, danger: true },
]

<AxSideNav
  items={items}
  user={<UserProfile name="Ahmed Al-Rashid" email="[email protected]" />}
  userActions={userActions}
/>

​
With AxHeader Integration

function AppLayout() {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <AxSideNav
        items={navItems}
        collapsed={collapsed}
        onCollapse={setCollapsed}
        hideCollapseButton  {/* Hide sidebar's toggle */}
        logo={<AxBrand variant={collapsed ? "icon" : "wordmark"} />}
      />
      <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        <AxHeader
          onSidebarToggle={() => setCollapsed(!collapsed)}
          sidebarCollapsed={collapsed}
          mobileLogo={<AxBrand variant="wordmark" />}
        />
        <main>{/* Page content */}</main>
      </div>
    </div>
  )
}

​
Mobile Navigation

By default, AxSideNav automatically displays a fixed bottom tab bar on mobile devices (< 768px). The first 4 top-level items appear as tabs, with overflow items accessible via a “More” menu. 
// Mobile nav is enabled by default
<AxSideNav items={items} showMobileNav={true} />

// Disable mobile nav to keep sidebar visible on mobile
<AxSideNav items={items} showMobileNav={false} />

​
Accessibility

  • Uses semantic <nav> and role="navigation"
  • Active items marked with aria-current="page"
  • Collapse button has proper aria-label
  • Groups have aria-expanded state
  • Labels hidden visually when collapsed but available to screen readers
  • Tooltips shown on hover in collapsed mode

​
Related Components

  • AxHeader - Horizontal header with sidebar toggle
  • AxActionMenu - Dropdown action menus (used for user actions)

Build docs developers (and LLMs) love

Get started for freeTalk to us