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.Section
						id="income"
						label="Income"
						onClickTrigger={handleClick}
						active={activeItem === 'income'}
						icon={<span className="icon-bank-note-03" />}
					/>

					<TreeNav.Section
						id="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.Item
							label="Living Expenses"
							id="expenses-living-expenses"
							active={activeItem === 'expenses-living-expenses'}
							onClick={handleClick}
						/>

						<TreeNav.Header label="Education" />
						<TreeNav.Item
							label="College for Lucas"
							id="expenses-education-college"
							active={activeItem === 'expenses-education-college'}
							onClick={handleClick}
						/>
						<TreeNav.Item
							label="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.Section
					id="income"
					label="Income"
					onClickTrigger={handleClick}
					active={activeSection === 'income'}
					icon={<span className="icon-bank-note-03" />}
				/>

				<TreeNav.Section
					id="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.Item
						label="Living Expenses"
						id="living-expenses"
						active={activeItem === 'living-expenses'}
						onClick={handleItemClick}
					/>

					<TreeNav.Header label="Education" />
					<TreeNav.Item
						label="College for Lucas"
						id="education-college"
						active={activeItem === 'education-college'}
						onClick={handleItemClick}
					/>
					<TreeNav.Item
						label="Education Expenses"
						id="education-expenses"
						active={activeItem === 'education-expenses'}
						onClick={handleItemClick}
					/>
				</TreeNav.Section>
			</TreeNav>
		</>
	);
}

render(<Example />);

Props

TreeNav

TreeNavHeader

TreeNavItem

TreeNavSection