Patterns
Navigation Patterns
Common navigation patterns with DS0 components.
Tab Navigation
Use Tabs for switching between related views:
<Tabs defaultValue="overview">
<Tabs.List>
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
<Tabs.Trigger value="analytics">Analytics</Tabs.Trigger>
<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="overview">Overview content</Tabs.Content>
<Tabs.Content value="analytics">Analytics content</Tabs.Content>
<Tabs.Content value="settings">Settings content</Tabs.Content>
</Tabs>Breadcrumb Navigation
Use Breadcrumb for hierarchical navigation:
<Breadcrumb>
<Breadcrumb.Item href="/">Home</Breadcrumb.Item>
<Breadcrumb.Item href="/docs">Docs</Breadcrumb.Item>
<Breadcrumb.Item current>Components</Breadcrumb.Item>
</Breadcrumb>Pagination
Use Pagination for large data sets:
<Pagination
currentPage={page}
totalPages={10}
onPageChange={setPage}
/>