Components
DrawerContent
<DrawerContentRoot {...args}>
<DrawerContentSection>
<DrawerContentSectionItem
label="Item one"
icon={{ name: 'clock' }}
isActive
/>
<DrawerContentSectionItem
label="Item two"
icon={{ name: 'calendar.badge.checkmark' }}
badge={4}
/>
<DrawerContentSectionItem
label="Item three"
icon={{ name: 'banknote' }}
/>
</DrawerContentSection>
</DrawerContentRoot>Import
import { DrawerContent } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
navigation | — | — | The drawer navigation object, passed as a prop rather than read from context — which is why a stub is enough to render this. Only toggleDrawer is called, and only on iOS. |
actions | — | — | Footer slot. Rendered inline on iOS and pinned to the bottom on Android. |
children | — | — | DrawerContentSections. Each holds an optional DrawerContentSectionTitle and any number of DrawerContentSectionItems, which take label, icon, isActive, badge and rightView. |
Examples
With Section Titles
<DrawerContentRoot {...args}>
<DrawerContentSection>
<DrawerContentSectionTitle type="large">Section A</DrawerContentSectionTitle>
<DrawerContentSectionItem
label="Item one"
icon={{ name: 'clock' }}
isActive
/>
<DrawerContentSectionItem
label="Item two"
icon={{ name: 'calendar.badge.checkmark' }}
badge={128}
/>
</DrawerContentSection>
<DrawerContentSection>
<DrawerContentSectionTitle>Section B</DrawerContentSectionTitle>
<DrawerContentSectionItem
label="Item three"
icon={{ name: 'person.2' }}
/>
<DrawerContentSectionItem
label="Settings"
icon={{ name: 'gearshape' }}
/>
</DrawerContentSection>
</DrawerContentRoot>With Actions
actions fills the footer slot (rendered inline on iOS, pinned on Android).
<DrawerContentRoot {...args} actions={<Text color="tertiary">Sign out</Text>}>
<DrawerContentSection>
<DrawerContentSectionItem
label="Item one"
icon={{ name: 'clock' }}
/>
</DrawerContentSection>
</DrawerContentRoot>