FinallyReact's layout system can be used by importing the Layout component. You can easily specify responsive navbar, sidenav, and footer elements for your application.
Below is a simple example of a Layout with default configurations for both Navbar and Sidenav:
If you choose to use a Navbar and Sidenav, the Layout component will manage both so they work nicely together. Note: this website uses the Layout component with integrated Navbar and Sidenav components, so you can see how it functions on various screen sizes.
A list of default z-index values used with FinallyReact components. You can use these as a guide to arrange your own component layers.
| Prop Name | Prop Type | Description |
|---|---|---|
| contentProps | HTMLAttributes | Props for content wrapper |
| footer | any | Custom footer component |
| footerProps | HTMLAttributes | Props for integrated Footer |
| fullHeight | boolean | Layout takes full height of screen |
| navbarProps | HTMLAttributes | Props for integrated Navbar |
| showNavbar | boolean | Should Layout display an integrated Navbar? |
| showSidenav | boolean | Should Layout display an integrated Sidenav? |
| sidenavProps | HTMLAttributes | Props for Sidenav |
| Prop Name | Prop Type | Description |
|---|---|---|
| activeKey | string | Active key for Sidenav |
| centerContent | React.ReactNode | Content for center of Navbar |
| customContent | React.ReactNode | Custom Navbar component |
| items | NavbarItem[] (below) | List of items for default Sidenav |
| leftContent | React.ReactNode | Content for left side of Navbar |
| logo | string | React.ReactNode | Logo for Navbar |
| mobileDropdownProps | HTMLAttributes | Props for mobile dropdown |
| rightContent | React.ReactNode | Content for right side of Navbar |
| sticky | boolean | Should Sidenav stick while scrolling? |
| withSidenav | boolean | Is Sidenav being used with Navbar? |
| Prop Name | Prop Type | Description |
|---|---|---|
| disabled | boolean | Is NavItem disabled? |
| dropdownItems | object[] | List of items for NavItem dropdown |
dropdownItems[].disabled | boolean | Is NavItem dropdown item disabled? |
dropdownItems[].iconLeft | React.ReactNode | Left icon for NavItem dropdown item |
dropdownItems[].iconRight | React.ReactNode | Right icon for NavItem dropdown item |
dropdownItems[].itemProps | HTMLAttributes | Props for NavItem dropdown item |
dropdownItems[].key | string | Identifier for NavItem dropdown item |
dropdownItems[].label | string | Label for NavItem dropdown item |
dropdownItems[].onClick | () => void | Click handler for NavItem dropdown item |
| iconLeft | React.ReactNode | Icon for left side of NavItem |
| iconRight | React.ReactNode | Icon for right side of NavItem |
| itemProps | HTMLAttributes | Props for NavItem |
| key | string | Identifier for NavItem |
| label | string | Label for NavItem |
| onClick | () => void | Click handler for NavItem |
| Prop Name | Prop Type | Description |
|---|---|---|
| activeKey | string | Active key for Sidenav |
| categoryProps | HTMLAttributes | Props for Sidenav category |
| customContent | React.ReactNode | Custom Sidenav component |
| hideMobileMenu | boolean | Should Sidenav hide mobile menu? |
| itemProps | HTMLAttributes | Props for Sidenav item |
| items | SidenavItem[] (below) | List of items for default Sidenav |
| showSearch | boolean | Should Sidenav show search? |
| sidenavProps | HTMLAttributes | Props for Sidenav |
| sidenavSearchProps | TextInputProps | Props for integrated Sidenav search |
| simple | boolean | Keep it simple; no flashy styles |
| sticky | boolean | Should Sidenav stick while scrolling? |
| withNavbar | boolean | Is Sidenav being used with Navbar? |
| Prop Name | Prop Type | Description |
|---|---|---|
| alts | string[] | List of alternative labels used for search |
| disabled | boolean | Is item disabled? |
| icon | React.ReactNode | Icon to display for item |
| items | SidenavItem[] (self) | Specify sub-items for categories |
| key | string | Identifier for item |
| label | string | Label for item |
| link | string | Href path for clicking item |
| render | (item: SidenavItemProps) => React.ReactNode; | Render prop for custom item |
| type | 'category' or 'item' | Type of item |