Adding record syntax for the rest just to be safe.
The children to display for each item. This should actually be a string
unless you manually provide a getTreeItemValue prop and/or update the
valueKey to be a key referencing a stringified value of this item so it
can be keyboard searched.
This is only optional by default in case you want to be able to render custom dividers or subheaders within your navigation tree. Otherwise, this should be required.
The component that should be used to render the tree item content. This is
normally a custom Link component if using a routing library.
Note: You can always provide a linkComponent prop on the main Layout
component instead which will be used whenever the to or href props
exist on an item.
Boolean if the item is just a placeholder Divider element. None of the
other props will be used.
Boolean if the left and/or right addons should be "forcefully" wrapped in a
<span> with the spacing class names applied instead of attempting to
clone it into the provided icon element.
This will make the tree item a link component and set this to the href.
Boolean if the provided item is a custom element and will not be rendered
in a TreeItem component. This is useful if you want to be able to render
Divider or ListSubheader components within a tree since they should
be able to be rendered without any of the tree functionality.
The unique identifier for an item within the tree. This is used to be able to link tree items together with parent items as well as selected/expanded logic.
An optional icon to display to the left of the children. See the
ListItem component for more details.
The vertical position the left icon, avatar, media, or large media should be placed.
The type of the addon that appears to the left of the primaryText or
children.
This id is used to be able to link tree items together with children and
parents. If the parentId is set to null, the tree item will appear at
the root of the tree. Otherwise, the tree item will appear as a child of
the referenced tree item by itemId
An optional element that should be rendered as the primaryText within the
list item. It is most likely easier to use the children prop instead, but
this allows you to create more complex components with the ListItem since
you can provided children and have the styles for the primaryText still
applied. By default, this will only allow one line of text and add ellipsis
for any text overflow.
An optional rel attribute to apply when using rendering a link.
An optional addon to display to the right of the primaryText or
children and should be used with the rightAddonType prop to adjust
spacing.
The vertical position the right icon, avatar, media, or large media should be placed.
The type of the addon that appears to the right of the primaryText or
children.
An optional element that should be rendered as the secondaryText within
the list item. By default, this will only span one line and add ellipsis
for overflow.
An optional className to apply to the <span> that surrounds the
secondaryText within the list item.
Boolean if the item is just a placeholder ListSubheader element. None of
the other props will be used other than children with the default item
renderer.
An optional link target. Example: "_blank".
Boolean if the children should be treated as the primaryText prop. This
will wrap them in an additional class so that they have ellipsis for text
overflow.
If you want to have more "freedom" within the ListItem, you can disable
this prop so that the height will grow depending on content.
NOTE: If the secondaryText prop is provided, this will always be
considered true.
An optional className to apply to the <span> that surrounds the
primaryText and optionally secondaryText within the list item.
If your routing library uses the to prop to render a link, this will be
used and assume the tree item is a link component.
Generated using TypeDoc
This is the "recommended" layout navigation item configuration that works pretty well out of the box for creating a navigation tree.