Top

The Top component is a structural element designed to act as a wrapper of the top-level elements in your page. The Top component is meant to be used as a wrapper of your top menus, navigation bars, etc. Typically, the Top component is used alongside the Content and Bottom components to achieve better page structure.

Usage

The primary use case for the Top component is as a top level section container.

import Layout from '@components/Layout/Layout/Layout';
import Top from '@components/Layout/Top/Top';
import Content from '@components/Layout/Content/Content';
import Bottom from '@components/Layout/Bottom/Bottom';

const App = () => {
    return (
        <Layout>
            <Top basis={30} style={{ display: 'flex', flexDirection: 'column' }}>Top Menu</Top>
            <Content>Main Content</Content>
            <Bottom>Bottom Section</Bottom>
        </Layout>
    );
};

export default App;

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component
ref	HTMLDivElement	undefined	Retrieves the component’s DOM element and assigns it to a variable.
basis	number	15%	Sets the flex-basis of the component as a percentage. For example, a value of 30 sets the flex-basis to 30%.
onAction	Record<string, (scope?: string, ...args: any[]) => void>	undefined	Allows you to add custom navigation action handlers to the component. See the Navigation component documentation for details.
anchor	string | HTMLElement	undefined	Links navigation to another element. When the anchor element is focused, this component’s actions will execute. Can be a CSS selector or HTMLElement.

Guide

Accessing the HTML element

To access the HTML DOM element of the Top component.

1. Declare a variable to hold the ref but don’t initialize it with a value
2. The declared value should have a type of HTMLDivElement.
3. Set the declared variable as the value of the ref prop of the Top component

Example

import Layout from '@components/Layout/Layout/Layout';
import Top from '@components/Layout/Top/Top';
import Content from '@components/Layout/Content/Content';
import Bottom from '@components/Layout/Bottom/Bottom';

const App = () => {
    let topRef!: HTMLDivElement

    return (
        <Layout>
            <Top ref={topRef}>Top Section</Top>
            <Content>Main Content</Content>
            <Bottom>Bottom Section</Bottom>
        </Layout>
    );
};

Now you can access the HTML element of Top with topRef and make modifications to it if needed.