TreeNav
TreeNav can be used for creating a navigational tree structure, allowing users to expand and collapse sections. The tree should be no more than two sections deep.
If a TreeNav.Section
has children defined, a Show/Hide button will be displayed in the parent item on hover. Clicking it will expand and collapse the section without firing that section's onClickTrigger
event.
Result
Loading...
Live Editor
const sections = {'income': () => <>The income section.</>,'expenses': () => <>The expenses section.</>,'expenses-living-expenses': () => <>Living Expenses content.</>,'expenses-education-college': () => <>College for Lucas content.</>,'expenses-education-expenses': () => <>Education Expenses content.</>,};function Example() {const [activeItem, setActiveItem] = React.useState('');const handleClick = (item) => {setActiveItem(item);};return (<Row id="pw-treenav"><Col xs={3}><TreeNav><TreeNav.Sectionid="income"label="Income"onClickTrigger={handleClick}active={activeItem === 'income'}icon={<span className="icon-bank-note-03" />}/><TreeNav.Sectionid="expenses"label="Expenses"onClickTrigger={handleClick}active={activeItem === 'expenses'}icon={<span className="icon-receipt-check" />}><TreeNav.Header label="Group Header" variant="group" /><TreeNav.Header label="Living" /><TreeNav.Itemlabel="Living Expenses"id="expenses-living-expenses"active={activeItem === 'expenses-living-expenses'}onClick={handleClick}/><TreeNav.Header label="Education" /><TreeNav.Itemlabel="College for Lucas"id="expenses-education-college"active={activeItem === 'expenses-education-college'}onClick={handleClick}/><TreeNav.Itemlabel="Education Expenses"id="expenses-education-expenses"active={activeItem === 'expenses-education-expenses'}onClick={handleClick}/></TreeNav.Section></TreeNav></Col><Col>{sections[activeItem] ? sections[activeItem]() : 'Select a section to view its content.'}</Col></Row>);}render(<Example />);
Using Offset Triggers
It's possible to use the offsetTriggers
prop to add a negative left margin to the triggers, which can be useful for aligning them with other elements in your layout.
Result
Loading...
Live Editor
function Example() {const [activeSection, setActiveSection] = React.useState('');const [activeItem, setActiveItem] = React.useState('');const handleClick = (item) => {setActiveSection(item);setActiveItem('');};const handleItemClick = (item) => {setActiveSection(item);setActiveItem(item);};return (<><h2>Section Title</h2><TreeNav offsetTriggers><TreeNav.Sectionid="income"label="Income"onClickTrigger={handleClick}active={activeSection === 'income'}icon={<span className="icon-bank-note-03" />}/><TreeNav.Sectionid="expenses"label="Expenses"onClickTrigger={handleClick}active={activeSection === 'expenses'}icon={<span className="icon-receipt-check" />}><TreeNav.Header label="Group Header" variant="group" /><TreeNav.Header label="Living" /><TreeNav.Itemlabel="Living Expenses"id="living-expenses"active={activeItem === 'living-expenses'}onClick={handleItemClick}/><TreeNav.Header label="Education" /><TreeNav.Itemlabel="College for Lucas"id="education-college"active={activeItem === 'education-college'}onClick={handleItemClick}/><TreeNav.Itemlabel="Education Expenses"id="education-expenses"active={activeItem === 'education-expenses'}onClick={handleItemClick}/></TreeNav.Section></TreeNav></>);}render(<Example />);