This is the SmartNav component
Package version
npm i module-tsl-ui-smart-nav --save
5.4.15
imports
import { SmartNav } from 'module-tsl-ui-smart-nav';
@import '~module-tsl-ui-smart-nav/smart-nav';
example for desktop (editable)
<div className="smart-nav--inline-wrapper" style={{ backgroundColor: '#FAFAFA', padding: 60, paddingBottom: 200 }}> <Popover content={<SmartNav menu={[ { label: 'SPaG', children: [ { label: 'Year 4', children: [ { label: 'Conjunction and clauses' }, { label: 'Adjectives' }, { label: 'Adverbs' }, { label: 'Logarithms rules' }, { label: 'Differential of a function' }, ], }, { label: 'Year 2', children: [{ label: 'Alphabet' }, { label: 'Colors' }, { label: 'Painting' }], }, ], }, { label: 'Numbers', children: [{ label: 'Difference' }, { label: 'Addition' }], }, ]} initialTitle="Topics" resetAll="All elements" keepOpen disableFullScreen />} placement="bottom" > <Button>Navigate!</Button> </Popover> </div>
example for mobile (editable)
<div style={{ backgroundColor: '#FAFAFA', padding: 10 }}> <SmartNav menu={[ { label: 'SPaG', children: [ { label: 'Year 4', children: [ { label: 'Conjunction and clauses' }, { label: 'Adjectives' }, { label: 'Adverbs' }, { label: 'Logarithms rules' }, { label: 'Differential of a function' }, ], }, { label: 'Year 2', children: [{ label: 'Alphabet' }, { label: 'Colors' }, { label: 'Painting' }], }, ], }, { label: 'Numbers', children: [{ label: 'Difference' }, { label: 'Addition' }], }, ]} initialTitle="Topics" resetAll="All elements" onDone={checkedItems => console.log(checkedItems)} /> </div>
Props
We couldn't detect props! Check if __docgenInfo is correctly defined