Header

Introduction

Welcome to the Header component documentation! As part of the page builder in App Platform, the Header component allows you to design and implement top-level navigation and branding elements for your web applications. This component is crucial for creating a consistent and professional look across your platform, providing users with accessible navigation and clear identification of your brand.

Why we developed it

The Header component provides a structured way to display essential information and navigation options at the top of every page. It helps establish a sense of place within the application, improving usability by making navigation intuitive and ensuring brand consistency. This is especially important for maintaining a strong brand presence and make it easy for users to navigate complex services.

What it could be used for

• Displaying a company logo and tagline.

• Housing primary navigation links to different sections of the application.

• Integrating quick access tools like search bars, notification icons, or user account settings.

• Highlighting important contact information or support links.

Example \ Use Case

Consider an MSP that provides a variety of IT services and uses the App Platform to manage client interactions. The Header component can be utilized to prominently display your logo for brand recognition and include navigation links to services, support, account management, and contact pages. This setup ensures that clients can easily navigate the platform, find the information they need quickly, and have constant access to assistance, enhancing overall user satisfaction and engagement with the platform.

Adding a Header to your page

Only ONE instance of the Header component can be used, per app platform page!

1. Access the Canvas: Open the page you're working on in edit mode, in App Platform.

2. Drag-and-Drop: Locate the 'Header' component in the component library, then drag and drop it onto the canvas.

Configuring the Header component

1. Select the component: Click on the added 'Header' component to select it.

2. Properties Panel: On the properties panel, you'll find various configurable options:

   • App Header

     • Render App Image: Toggle to show\hide the App's image.

     • Render App Icon: Toggle to show\hide the App Title's icon.

     • Icon: Specify an icon from Material UI to show next to the link.

     • Icon Size: Adjust the size of the icon.

     • Render Link Header: Toggle to show\hide the App's Title.

   • Tabs

     • Add new tab: Specify a new link to add to the header component

     • Drag\Drop: Reorder the links in the header component.

   • Menu

     • Icon URL: Specify the URL of the Profile Menu icon.

     • Disable Profile Menu: Toggle to enable\disable the Profile Menu in the header.

     • Add new menu item: Specify a new link to add to the Profile Menu.

     • Drag\Drop: Reorder the links in the Profile Menu.

3. Live Preview: The canvas provides a live preview of your configured component(s) once you've made changes.

If you have any questions or need assistance, feel free to reach out to our support team. - Happy designing! 🎨🚀