Pluma
About
MCP Server
Getting started
Contributing
Breaking Changes
Changelog
Content
Icons
Motion
Style Utilities
Test Helpers
Tokens
Overview
Status
Accordion
AccordionGroup
Box
Card
CenterBaseline
Divider
EmptyState
Flex
FormLayout
Grid
InlineStack
Panel
Scrollable
Stack
Code
DescriptionList
Emphasis
Heading
List
Paragraph
Strong
Text
TextLabel
Truncated
Avatar
CodeBlock
Coin
Icon
Image
LabelIcon
Breadcrumbs
Link
NavItem
Page
Pagination
PlainLink
SideNav
Tabs
TabNav
Button
ButtonGroup
CloseButton
DropdownMenu
PlainButton
ToggleButton
Checkbox
CheckboxGroup
ColorPicker
Combobox
DatePicker
Form
JsonField
NumberField
OptionCard
OptionCardGroup
Radio
RadioGroup
Search
SegmentedControl
Select
Slider
TextArea
TextField
Toggle
Badge
DataTable
Filters
FormattedDateTime
FormattedRelativeTime
KeyboardShortcut
Label
ProgressBar
ProgressCircle
StatusIndicator
Table
Tag
Banner
PageLoader
SkeletonShape
SkeletonText
Snackbar
Spinner
Blanket
ConfirmationModal
Drawer
Modal
Modal manager
Popover
Tooltip
VisuallyHidden
Anti-patterns
Combobox with Add New
Density
Inline Form Controls
Refinement levers
Search with DropdownMenu
States
Voice
Ember Floating UI
Ember prop spreading
ModalPrimitive
PlumaProvider
PopoverPrimitive
Portal
React Yield
fly-alert
fly-badge
fly-btn
fly-card
fly-close
fly-label
fly-panel
fly-progress
fly-range
fly-spinner
fly-tag
Forms
Lists
Tailwind
Componentsv2.170.1
Iconsv1.15.0
MCPv0.8.18
Tokensv0.34.1

NavItem

Figma
Github
Storybook

A component to display a navigation button in a sidebar.

Importing

The component can be imported via:

import { NavItem } from '@customerio/pluma-components/react';

For expandable nav items:

import {
  NavItemExpandable,
  NavItemExpandableTrigger,
  NavItemExpandableContent,
} from '@customerio/pluma-components/react';

For dropdown nav items:

import {
  NavItemDropdown,
  NavItemDropdownTrigger,
  NavItemDropdownContent,
} from '@customerio/pluma-components/react';

Usage

The NavItem component accepts a href prop, just like other components that extend from PlainLink.

Additionally, an icon can be provided to render an icon next to the label.

Dashboard
<Box display="flex">
  <NavItem icon="dashboard" href="#">Dashboard</NavItem>
</Box>

Selected

Use the isSelected prop to indicate the currently active nav item - for example, to indicate the currently active page.

Segments
<Box display="flex">
  <NavItem icon="segment" href="#" isSelected={true}>Segments</NavItem>
</Box>

Collapsed

Use the isCollapsed prop to hide the label and only show the icon. This can be used when collapsing a navigation sidebar for a condensed view.

Dashboard
<Box display="flex">
  <NavItem icon="dashboard" href="#" isCollapsed={true}>Dashboard</NavItem>
</Box>

Expandable content

NavItemExpandable, NavItemExpandableTrigger, and NavItemExpandableContent can be used to create a group of nav items that can be expanded and collapsed.

NavItemExpandable is a wrapper component that provides the context for the nested items. It doesn't render anything itself.

NavItemExpandableTrigger is a component that renders a NavItem which functions as an expand/collapse toggle button for the section.

NavItemExpandableContent is the container for the nested items. When the section's state is expanded, it will render the nested elements.

Companies
Appointments
Courses
<Box display="flex" flexDirection="column" style={{ width: 200 }}>
  <NavItemExpandable>
    <NavItemExpandableTrigger icon="object">Objects</NavItemExpandableTrigger>
    <NavItemExpandableContent>
      <NavItem href="#" icon="company">Companies</NavItem>
      <NavItem href="#" icon="copy-to-clipboard">Appointments</NavItem>
      <NavItem href="#" icon="integrations">Courses</NavItem>
    </NavItemExpandableContent>
  </NavItemExpandable>
</Box>

Default open

Use the defaultIsOpen prop to have the expandable section open by default.

Companies
Appointments
Courses
<Box display="flex" flexDirection="column" style={{ width: 200 }}>
  <NavItemExpandable defaultIsOpen={true}>
    <NavItemExpandableTrigger icon="object">Objects</NavItemExpandableTrigger>
    <NavItemExpandableContent>
      <NavItem href="#" icon="company">Companies</NavItem>
      <NavItem href="#" icon="copy-to-clipboard" isSelected={true}>Appointments</NavItem>
      <NavItem href="#" icon="integrations">Courses</NavItem>
    </NavItemExpandableContent>
  </NavItemExpandable>
</Box>

Dropdown content

NavItemDropdown, NavItemDropdownTrigger, and NavItemDropdownContent can be used to create a group of nav items where a subset is shown inline (animated in/out based on selection), and the rest are accessible via a dropdown menu triggered by the trigger item.

NavItemDropdown wraps the entire group.

NavItemDropdownContent contains the nav items that animate in when selected and collapse when deselected.

NavItemDropdownTrigger renders a nav item that opens a dropdown menu containing all the items from NavItemDropdownContent.

Dashboard
Settings
Broadcasts
import { useState } from 'react';

export default function Example() {
  const [activeItem, setActiveItem] = useState('broadcasts');
  const select = (id, e) => {
    e?.preventDefault();
    setActiveItem(id);
  };

  return (
    <Box display="flex" flexDirection="column" style={{ width: 200 }}>
      <NavItem icon="dashboard" href="#" isSelected={activeItem === 'dashboard'} onClick={(e) => select('dashboard', e)}>Dashboard</NavItem>
      <NavItem icon="workspace-settings" href="#" isSelected={activeItem === 'settings'} onClick={(e) => select('settings', e)}>Settings</NavItem>
      <NavItemDropdown>
        <NavItemDropdownContent>
          <NavItem icon="broadcast" href="#" isSelected={activeItem === 'broadcasts'} onClick={(e) => select('broadcasts', e)}>Broadcasts</NavItem>
          <NavItem icon="campaigns" href="#" isSelected={activeItem === 'campaigns'} onClick={(e) => select('campaigns', e)}>Campaigns</NavItem>
          <NavItem icon="transactional-api" href="#" isSelected={activeItem === 'transactional'} onClick={(e) => select('transactional', e)}>Transactional</NavItem>
        </NavItemDropdownContent>
        <NavItemDropdownTrigger icon="more">More</NavItemDropdownTrigger>
      </NavItemDropdown>
    </Box>
  );
}

API

PlumaNavItem extends Box

arrowDirection  "up" | "down" | undefined

Which direction the arrow should point, if withArrow is true.

hasSelectedChild  boolean | undefined

If this item is the trigger for an expandable section, this indicates whether any of the child items are selected.

href  string | undefined

The URL passed into the link component (or a tag)

icon  IconName | null | undefined

The name of an icon (from Pluma Icons) to render in the nav item

isCollapsed  boolean | undefined

Whether the nav item should render in the "collapsed" state, which hides the text and only shows the icon.

isDisabled  boolean | undefined

Whether the link should be disabled (this prevents click handlers from firing)

isExternal  boolean | undefined

When this flag is true, an a tag will be used instead of the provider's linkComponent, even if it exists. Additionally, target="_blank" rel="noopener noreferrer" will be added automatically

isNested  boolean | undefined

Whether this nav item is nested within another nav item.

isSelected  boolean | undefined

Whether this nav item is currently active/selected, which changes the item's appearance.

onClick  ((evt?: OnClickArgType | undefined) => void) | undefined

If provided, the component will render as a button and call this function when clicked.

replace  boolean | undefined

This is passed into the provider's linkComponent. It can be used by the link component implementation to handle replaceState instead of pushState

withArrow  boolean | undefined

Whether an arrow icon should be rendered on the right side of the nav item, indicating that this is a parent item that can be expanded to show child items.

withSafeExternalAttributes  boolean | undefined

This allows turning off the automatic addition of target="_blank" rel="noopener noreferrer". This can be used for links to other protocols like mailto:

PlumaNavItemExpandable

defaultIsOpen  boolean | undefined

Whether the expandable section should be open by default.

PlumaNavItemExpandableTrigger extends NavItem

arrowDirection  "up" | "down" | undefined

Which direction the arrow should point, if withArrow is true.

hasSelectedChild  boolean | undefined

If this item is the trigger for an expandable section, this indicates whether any of the child items are selected.

href  string | undefined

The URL passed into the link component (or a tag)

icon  IconName | null | undefined

The name of an icon (from Pluma Icons) to render in the nav item

isCollapsed  boolean | undefined

Whether the nav item should render in the "collapsed" state, which hides the text and only shows the icon.

isDisabled  boolean | undefined

Whether the link should be disabled (this prevents click handlers from firing)

isExternal  boolean | undefined

When this flag is true, an a tag will be used instead of the provider's linkComponent, even if it exists. Additionally, target="_blank" rel="noopener noreferrer" will be added automatically

isNested  boolean | undefined

Whether this nav item is nested within another nav item.

isSelected  boolean | undefined

Whether this nav item is currently active/selected, which changes the item's appearance.

onClick  ((evt?: OnClickArgType | undefined) => void) | undefined

If provided, the component will render as a button and call this function when clicked.

replace  boolean | undefined

This is passed into the provider's linkComponent. It can be used by the link component implementation to handle replaceState instead of pushState

withArrow  boolean | undefined

Whether an arrow icon should be rendered on the right side of the nav item, indicating that this is a parent item that can be expanded to show child items.

withSafeExternalAttributes  boolean | undefined

This allows turning off the automatic addition of target="_blank" rel="noopener noreferrer". This can be used for links to other protocols like mailto:

PlumaNavItemDropdown extends Box

On this page

Importing
Usage
Selected
Collapsed
Default open
Dropdown content
API