A component that provides navigation for pages. Quickly build beautiful React apps.
- Written in Typescript, Friendly Static Type Support.
Live demo: panel-navigation
# with npm
npm install panel-navigation
Here is a quick example to get you started, it's all you need:
import React, { useState } from "react";
import { createRoot } from 'react-dom/client';
import { Navigation, Item, Panel } from 'panel-navigation';
import 'panel-navigation/lib/index.css';
const App = () => {
return (
<Navigation>
<Panel itemKey="0" content={<About />}>
<span>About Us</span>
</Panel>
<Panel itemKey="1" content={<Services />}>
<span>Services</span>
</Panel>
<Item isSubPage={true}>
<a>Studies</a>
</Item>
<Item>
<a>News</a>
</Item>
</Navigation>
});
createRoot(document.getElementById('root')).render(<App />);import { Navigation, Item, Panel } from 'panel-navigation';
import 'panel-navigation/lib/index.css';Component uses a default ease of "expo.out". You can easily overwrite this by setting the ease property to another (valid) ease value.
none.nonepower1.outcirc.outpower4.out
| Properties | Description | Type | Default |
|---|---|---|---|
| visible | control visible state | boolean | true |
| ease | ease property | string | expo.out |
| duration | the duration of the transition, in milliseconds | number | 600 |
| onEntered | callback fired after the "entered" status is applied. | function(e) => {} | () => {} |
| onExited | callback fired after the "exited" status is applied. | function(e) => {} | () => {} |
| htmlClassName | add className to html tag | string | scrollDisabled |
| Properties | Description | Type | Default |
|---|---|---|---|
| itemKey | key of the panel | string | |
| isSubPage | set a special style | boolean | false |
| content | panel content | ReactNode |
| Properties | Description | Type | Default |
|---|---|---|---|
| isSubPage | set some special style | boolean | false |
React Navigation is MIT Licensed