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 [activeSection, setActiveSection] = React.useState(''); const [activeItem, setActiveItem] = React.useState(''); const handleClick = (item) => { setActiveSection(item); }; const handleItemClick = (item) => { setActiveItem(item); }; return ( <Row id="pw-treenav"> <Col xs={3}> <TreeNav> <TreeNav.Section id="income" label="Income" onClickTrigger={(id) => { handleClick(id); handleItemClick(id); }} active={activeSection === 'income'} icon={<span className="icon-bank-note-03" />} /> <TreeNav.Section id="expenses" label="Expenses" onClickTrigger={(id) => { handleClick(id); handleItemClick(id); }} 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" onClick={() => handleItemClick('expenses-living-expenses')} /> <TreeNav.Header label="Education" /> <TreeNav.Item label="College for Lucas" onClick={() => handleItemClick('expenses-education-college')} /> <TreeNav.Item label="Education Expenses" onClick={() => handleItemClick('expenses-education-expenses')} /> </TreeNav.Section> </TreeNav> </Col> <Col> {sections[activeItem] ? sections[activeItem]() : 'Select a section to view its content.'} </Col> </Row> ); } render(<Example />);

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 [activeSection, setActiveSection] = React.useState('');
    const [activeItem, setActiveItem] = React.useState('');

    const handleClick = (item) => {
        setActiveSection(item);
    };

    const handleItemClick = (item) => {
        setActiveItem(item);
    };

    return (
        <Row id="pw-treenav">
            <Col xs={3}>
                <TreeNav>
                    <TreeNav.Section
                        id="income"
                        label="Income"
                        onClickTrigger={(id) => {
                            handleClick(id);
                            handleItemClick(id);
                        }}
                        active={activeSection === 'income'}
                        icon={<span className="icon-bank-note-03" />}
                    />

                    <TreeNav.Section
                        id="expenses"
                        label="Expenses"
                        onClickTrigger={(id) => {
                            handleClick(id);
                            handleItemClick(id);
                        }}
                        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"
                            onClick={() => handleItemClick('expenses-living-expenses')}
                        />

                        <TreeNav.Header label="Education" />
                        <TreeNav.Item
                            label="College for Lucas"
                            onClick={() => handleItemClick('expenses-education-college')}
                        />
                        <TreeNav.Item
                            label="Education Expenses"
                            onClick={() => handleItemClick('expenses-education-expenses')}
                        />
                    </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 [activeItems, setActiveItems] = React.useState(''); const handleClick = (item) => { setActiveItems(item); }; return ( <> <h2>Section Title</h2> <TreeNav offsetTriggers> <TreeNav.Section id="income" label="Income" onClickTrigger={handleClick} active={activeItems === 'income'} icon={<span className="icon-bank-note-03" />} /> <TreeNav.Section id="expenses" label="Expenses" onClickTrigger={handleClick} active={activeItems === 'expenses'} icon={<span className="icon-receipt-check" />} > <TreeNav.Header label="Group Header" variant="group" /> <TreeNav.Header label="Living" /> <TreeNav.Item label="Living Expenses" /> <TreeNav.Header label="Education" /> <TreeNav.Item label="College for Lucas" /> <TreeNav.Item label="Education Expenses" /> </TreeNav.Section> </TreeNav> </> ); } render(<Example />);

function Example() {
    const [activeItems, setActiveItems] = React.useState('');
    const handleClick = (item) => {
        setActiveItems(item);
    };

    return (
        <>
            <h2>Section Title</h2>
            <TreeNav offsetTriggers>
                <TreeNav.Section
                    id="income"
                    label="Income"
                    onClickTrigger={handleClick}
                    active={activeItems === 'income'}
                    icon={<span className="icon-bank-note-03" />}
                />

                <TreeNav.Section
                    id="expenses"
                    label="Expenses"
                    onClickTrigger={handleClick}
                    active={activeItems === 'expenses'}
                    icon={<span className="icon-receipt-check" />}
                >
                    <TreeNav.Header label="Group Header" variant="group" />
                    <TreeNav.Header label="Living" />
                    <TreeNav.Item label="Living Expenses" />

                    <TreeNav.Header label="Education" />
                    <TreeNav.Item label="College for Lucas" />
                    <TreeNav.Item label="Education Expenses" />
                </TreeNav.Section>
            </TreeNav>
        </>
    );
}

render(<Example />);

Props

TreeNav

TreeNavHeader

TreeNavItem

TreeNavSection