Navigation

The Starter Kit comes with a few different options for the Navbar and the footer.

Once you chose on Header and Footer component, it's recommended that you delete the remaining ones to keep the bundle size as small as possible.

Navbar

Navbar

The Navbar component focuses on the mobile first approach. Therefore, no links are displayed in the horizontal menu bar even on desktop breakpoints. All links live within a Sidebar that can be toggled via the Burger Menu on the right side. If activated, the sidebar will fade in from the right side and take a third of the screen width on larger screens and the full screen width on smaller screens.

The Navbar does not need any props. However, it is highly recommended that you swap the links that live in the sidebar according to you needs. Each Link is a NavbarMenuLink, which is described below.

MegaMenu

The MegaMenu basically does the same thing as the Navbar with the slight difference that the sidebar container will take the full screen when activated even on larger screen sizes.

MenuBar

The MenuBar component is the horizontal bar at you see when using the Navbar or MegaMenu components. It takes the full width of the screen and can display an icon or text on the left side and has a burger menu on the right side. You can reuse this component in your own custom menu bar if you want to.

The MenuBar component takes one argument as a prop:

• onClick (function) is invoked when the user clicks on the burger menu

Example:

<MenuBar onClick={()=>{}} />

NavbarMenuLink

A link component that is displayed in the siderbar of Navbar and MegaMenu. The component takes 3 arguments as props:

• title (string) the title of the link
• link: (string) the href the link will lead to
• onClick (function) additional functionality when clicking the link

Example:

<NavbarMenuLink
        title="My Link"
        link="/..."
        onClick={()=>{}}
    />

Footer

The Starter Kit comes with two different Footers.

AdvancedFooter

A Footer in a three-column grid layout that behaves responsively. Every column has a headline and custom content links. These can be changed in the footerData variable in the AdvancedFooter Component. The AdvancedFooter does not take any props, but you should swap links in the Component with the ones you need for your project.

SimleFooter

This Footer only has the copyright on the left side and legal links on the right side. Again, you should swap the link if necessary.