NavLink

Navigation link with active state

Import: import { NavLink } from 'react-native-mantine';

Usage

import { NavLink, Icon } from 'react-native-mantine';

<NavLink
  label="Dashboard"
  description="Overview of your account"
  icon={<Icon name="home" size={16} />}
  active
  onPress={() => navigate('Dashboard')}
/>

<NavLink label="Settings" onPress={() => navigate('Settings')}>
  <NavLink label="Profile" onPress={() => navigate('Profile')} />
</NavLink>

Props

Prop	Type	Default	Description
`label`	`React.ReactNode`		Link label
`description`	`React.ReactNode`		Link description
`icon`	`React.ReactNode`		Icon displayed on the left side
`rightSection`	`React.ReactNode`		Section displayed on the right side
`color`	`MantineColor`	`'blue'`	Link color from theme
`variant`	`Variants<'filled' \| 'light' \| 'subtle'>`	`'light'`	Link variant
`active`	`boolean`	`false`	Active state
`disabled`	`boolean`	`false`	Disabled state
`children`	`React.ReactNode`		Children NavLinks
`onPress`	`() => void`		Called when link is pressed
`accessibilityLabel`	`string`		Accessibility label for the link
`style`	`any`		Additional styles
`disableIfNoPress`	`boolean`	`true`	Disable link if no onPress handler is provided
`testID`	`string`		Test identifier used by testing frameworks
`withTextWrapper`	`boolean`	`true`	If false, children will not be wrapped in a Text component. This is useful when the children contain non-text elements like icons or custom components.

Source on GitHub · npm