1 files changed, 35 insertions, 0 deletions
diff --git a/src/demos/NavigationDemo.tsx b/src/demos/NavigationDemo.tsx
new file mode 100644
index 0000000..ebc75f2
--- /dev/null
+++ b/src/demos/NavigationDemo.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import { BreadcrumbItem, Breadcrumbs } from '@astryxdesign/core/Breadcrumbs'
+import { VStack } from '@astryxdesign/core/VStack'
+import { Step, Stepper } from '@astryxdesign/core/Stepper'
+import { Tab, TabList } from '@astryxdesign/core/TabList'
+
+export function NavigationDemo() {
+  const [tab, setTab] = useState('overview')
+  const [step, setStep] = useState(2)
+
+  return (
+    <VStack gap={5}>
+      <Breadcrumbs>
+        <BreadcrumbItem href="/">首页</BreadcrumbItem>
+        <BreadcrumbItem href="/components">组件</BreadcrumbItem>
+        <BreadcrumbItem isCurrent>导航示例</BreadcrumbItem>
+      </Breadcrumbs>
+
+      <TabList value={tab} onChange={setTab} hasDivider>
+        <Tab value="overview" label="概览" />
+        <Tab value="activity" label="活动" />
+        <Tab value="settings" label="设置" />
+      </TabList>
+
+      <VStack width="100%">
+        <Stepper activeStep={step} orientation="horizontal" onStepClick={setStep}>
+          <Step step={0} label="购物车" />
+          <Step step={1} label="配送" />
+          <Step step={2} label="支付" />
+          <Step step={3} label="完成" />
+        </Stepper>
+      </VStack>
+    </VStack>
+  )
+}