Default
The flexible navbar can display different styles depending on props (all of which are optional). This is the default with no props.
<FlexNavbar />
With Categories
The flexible navbar can an additional category menu below the main navbar.
<FlexNavbar categories={[...]} />
Customised Title and color
You can specify your own Navbar title and colour
<FlexNavbar title="..." color="..."/>
Navigation items
You provide navigation links via a NavItem[] JSON that can contain submenus.
<FlexNavbar menu={[{ name: 'Menu1', href: '#' }, { name: 'Menu2', href : '#' }]} />
Background colour
Insert an optional background color
<FlexNavbar bg="purple.100" />
Colour Scheme
Specify a colour scheme.
<FlexNavbar colorScheme="purple" />
Logo
Specify an image file as a logo.
<FlexNavbar logo="..." />
Custom Elements
You can specify additional elements in the body of the component. By default, these will appear in the right (but you can change this).
<FlexNavbar><Avatar /></FlexNavbar>
Reposition Elements
You can move any of the following to the left, centre or right part of the navbar (title, logo, menu, children).
<FlexNavbar titlePos="center" logoPos="center" menuPos="left" childrenPos="right"><Avatar /></FlexNavbar>
Fixed position
Stick the navbar to the top of the screen by specifying 'fixed'. Note: this is not enabled in the example below because there is already a fixed position navbar on this page.
<FlexNavbar fixed />