The component can be imported via:
For expandable nav items:
For dropdown nav items:
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.
Use the isSelected prop to indicate the currently active nav item - for example,
to indicate the currently active page.
Use elementBefore and elementAfter to render custom content in the leading and
trailing parts of the nav item. elementBefore renders in the leading slot, after the
icon if one is present; elementAfter renders in the trailing slot, before the expand
arrow when withArrow is set. Both compose with the built-in icon/arrow rather than
replacing them.
In React, both are node props. In Ember, they can be passed as a component or, more
commonly, via the :elementBefore and :elementAfter named blocks (the label is then
provided via the :default block).
Use isVisibleWhenSelected and isVisibleWhenDeselected when a nav item should
remain available in navigation data but only appear inline for specific selection
states. This is useful for items that live in another menu while deselected, but
should animate into their original position when they become selected.
isSelected and hasSelectedChild both count as the selected state for this
visibility behavior.
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.
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.
Use the defaultIsOpen prop to have the expandable section open by default.
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.
Use menuBefore and menuAfter to add content that should only appear in the
dropdown menu. In Ember, use <:menuBefore> and <:menuAfter> named blocks.
This is useful for actions that relate to the navigation itself, but should not
render as animated inline nav items.
Additional dropdown content can be rendered before or after the nav items without
also rendering it inline in the side navigation.
The id of the element controlled by the arrow button, if the arrow is independently interactive.
Whether the element controlled by the arrow button is expanded, if the arrow is independently interactive.
The accessible label for the arrow button, if the arrow is independently interactive.
Which direction the arrow should point, if withArrow is true.
Custom content to render in the trailing (after) slot of the nav item,
alongside the expand arrow when withArrow is set. In React this is a node;
in Ember it can be passed as a component or provided via the :elementAfter
named block.
Custom content to render in the leading (before) slot of the nav item, in
place of the icon. In React this is a node; in Ember it can be passed as
a component or provided via the :elementBefore named block.
If this item is the trigger for an expandable section, this indicates whether any of the child items are selected.
The URL passed into the link component (or a tag)
The name of an icon (from Pluma Icons) to render in the nav item
Whether the nav item should render in the "collapsed" state, which hides the text and only shows the icon.
Whether the link should be disabled (this prevents click handlers from firing)
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
Whether this nav item is nested within another nav item.
Whether this nav item is currently active/selected,
which changes the item's appearance.
Whether the nav item should be visible in the inline navigation when it is not selected.
Whether the nav item should be visible in the inline navigation when it is selected.
If provided with href and withArrow, the arrow will render as a separate button and call this function when clicked.
If provided, the component will render as a button and call this function when clicked.
This is passed into the provider's linkComponent.
It can be used by the link component implementation to handle replaceState instead of pushState
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.
This allows turning off the automatic addition of target="_blank" rel="noopener noreferrer".
This can be used for links to other protocols like mailto:
Whether the expandable section should be open by default.
The id of the element controlled by the arrow button, if the arrow is independently interactive.
Whether the element controlled by the arrow button is expanded, if the arrow is independently interactive.
The accessible label for the arrow button, if the arrow is independently interactive.
Which direction the arrow should point, if withArrow is true.
Custom content to render in the trailing (after) slot of the nav item,
alongside the expand arrow when withArrow is set. In React this is a node;
in Ember it can be passed as a component or provided via the :elementAfter
named block.
Custom content to render in the leading (before) slot of the nav item, in
place of the icon. In React this is a node; in Ember it can be passed as
a component or provided via the :elementBefore named block.
If this item is the trigger for an expandable section, this indicates whether any of the child items are selected.
The URL passed into the link component (or a tag)
The name of an icon (from Pluma Icons) to render in the nav item
Whether the nav item should render in the "collapsed" state, which hides the text and only shows the icon.
Whether the link should be disabled (this prevents click handlers from firing)
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
Whether this nav item is nested within another nav item.
Whether this nav item is currently active/selected,
which changes the item's appearance.
Whether the nav item should be visible in the inline navigation when it is not selected.
Whether the nav item should be visible in the inline navigation when it is selected.
If provided with href and withArrow, the arrow will render as a separate button and call this function when clicked.
If provided, the component will render as a button and call this function when clicked.
This is passed into the provider's linkComponent.
It can be used by the link component implementation to handle replaceState instead of pushState
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.
This allows turning off the automatic addition of target="_blank" rel="noopener noreferrer".
This can be used for links to other protocols like mailto:
'%3e%3cpath%20d='M19%2028.5C19%2025.9804%2020.0009%2023.5641%2021.7825%2021.7825C23.5641%2020.0009%2025.9804%2019%2028.5%2019C31.0196%2019%2033.4359%2020.0009%2035.2175%2021.7825C36.9991%2023.5641%2038%2025.9804%2038%2028.5C38%2031.0196%2036.9991%2033.4359%2035.2175%2035.2175C33.4359%2036.9991%2031.0196%2038%2028.5%2038C25.9804%2038%2023.5641%2036.9991%2021.7825%2035.2175C20.0009%2033.4359%2019%2031.0196%2019%2028.5Z'%20fill='%231ABCFE'/%3e%3cpath%20d='M0%2047.5C0%2044.9804%201.00089%2042.5641%202.78249%2040.7825C4.56408%2039.0009%206.98044%2038%209.5%2038H19V47.5C19%2050.0196%2017.9991%2052.4359%2016.2175%2054.2175C14.4359%2055.9991%2012.0196%2057%209.5%2057C6.98044%2057%204.56408%2055.9991%202.78249%2054.2175C1.00089%2052.4359%200%2050.0196%200%2047.5H0Z'%20fill='%230ACF83'/%3e%3cpath%20d='M19%200V19H28.5C31.0196%2019%2033.4359%2017.9991%2035.2175%2016.2175C36.9991%2014.4359%2038%2012.0196%2038%209.5C38%206.98044%2036.9991%204.56408%2035.2175%202.78249C33.4359%201.00089%2031.0196%200%2028.5%200L19%200Z'%20fill='%23FF7262'/%3e%3cpath%20d='M0%209.5C0%2012.0196%201.00089%2014.4359%202.78249%2016.2175C4.56408%2017.9991%206.98044%2019%209.5%2019H19V0H9.5C6.98044%200%204.56408%201.00089%202.78249%202.78249C1.00089%204.56408%200%206.98044%200%209.5H0Z'%20fill='%23F24E1E'/%3e%3cpath%20d='M0%2028.5C0%2031.0196%201.00089%2033.4359%202.78249%2035.2175C4.56408%2036.9991%206.98044%2038%209.5%2038H19V19H9.5C6.98044%2019%204.56408%2020.0009%202.78249%2021.7825C1.00089%2023.5641%200%2025.9804%200%2028.5H0Z'%20fill='%23A259FF'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1_137'%3e%3crect%20width='38'%20height='57'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=small}
