Flexible Navbar

FlexNavbar allows a customised navbar to be displayed with title, menu, optional logo and optional children in various positions, and can be fixed to the top of the screen.

Header Image

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 />