Grapes homepage1.57.0
  • Guide
  • Tokens
  • Components
    Grapes on GithubGrapes on Figma
    Interaction
    • Button
    • IconButton
    • FloatingActionBar
    • Link
    Icons
    • Icon
    • HighlightIcon
    Form
    • AmountInput
    • Autocomplete
    • AutocompleteMultiple
    • AutocompletePlace
    • CheckboxBox
    • CheckboxField
    • DatePicker
    • FormField
    • Input
    • OptionGroup
    • PasswordInput
    • PhoneInput
    • RadioBox
    • RadioField
    • RadioGroup
    • Select
    • SwitchField
    • TextArea
    • TextInput
    • Upload
    • UploadButton
    Feedback
    • Badge
    • Banner
    • Callout
    • EmptyState
    • Modal
    • ModalSlideshow
    • DeprecatedModalSlideshow
    • PageModal
    • Skeleton
    • Tag
    • Toast
    • Tooltip
    Data display
    • Accordion
    • Avatar
    • Box
    • Calendar
    • CalendarRange
    • CollapsibleList
    • FileCard
    • InfoTip
    • ListBox
    • ListView
    • Panel
    • SidePanel
    • DeprecatedPreview
    • Table
    • Timeline
    • useDateFormatter
    Navigation
    • DropdownItem
    • DropdownMenu
    • Navigation
    • NavigationItem
    • Popover
    • Tabs

    NavigationItem

    View source code
    • Usage
    • Props
    Usage

    The NavigationItem component should only be used in the Navigation component.

    Addon

    The leftAddon and rightAddon props are used to display another element inside the navigation item.

    12
    Navigation item
    Navigation item
    12
    <>
      <NavigationItem leftAddon={<Badge>12</Badge>} text="Navigation item" />
      <NavigationItem rightAddon={<Badge>12</Badge>} text="Navigation item" />
    </>
    

    Active

    The isActive prop is used to display the navigation item as active.

    Main navigation item
    <>
      <NavigationItem isActive text="Main navigation item" />
    </>