Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.13.1
@intility/bifrost-react@6.21.1
@intility/bifrost-react-datepicker@6.2.11
@intility/bifrost-react-select@6.1.5
/
/
/
Setup example

Setup example

Setup example
Go to top

Other examples

Color mode picker
Color mode picker menu in top nav
Profile picture
Logged in user image in top nav
Table of contents
Responsive floating or sticky table of contents
Charts
Chart styling examples using recharts lib
Wizard
Create a step-by-step form
Date range presets
Datepicker range with presets

Basic app structure

Bifrost is here to help create a consistent look and feel for all Intility web apps, and as such we recommend you use the <Nav> component for main app menus.

Usually you will do something like <NavLink to='/path'> instead of <a href='#path'> in the example below.

If you use <NavLink> from react-router it will add an .active css class if the link matches the current page, but you can also use className='active' on <a> or <Link> to mark the menu item as currently active.

Responsive navigation

By default, the <Nav> component will provide a mobile-friendly fullscreen menu, with the contents passed to the side prop. A hamburger button to open the mobile menu will appear in the top bar for screens smaller than 960px wide, and at the same breakpoint the sidebar is hidden.