Home / Blog / How to create a Navigation menu screen

How to create a Navigation menu screen

14 Aug 2024 · 7 min read

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Navigation Menu Screen is a cornerstone of user interface design, acting as the compass for users within an app. It's essential for guiding users effortlessly through the app's various features and sections, ensuring a seamless and intuitive user experience. By offering a well-organized and accessible layout, the Navigation Screen enables users to find the information or functionality they seek without frustration.

This article offers a comprehensive guide, equipping designers and developers to seamlessly integrate a user-centric Navigation Menu Screen into their applications. This effortless integration is made possible by leveraging design components from the Ionic Kit, built on the robust foundation of the extensive library within the Ionic framework.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start navigation-screen blank --type=react

3. Get inside the project directory

cd navigation-screen

4. Create page Navigation.tsx inside src/pages and add code

import { IonPage } from '@ionic/react';

const Navigation: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default Navigation;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Add the header code

For convenience, we will be using the layout structure recommended by Ionic for all our screens. This allows us to add header code and content inside the <IonPage></IonPage>.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Place a title on the toolbar

Inside the IonToolbar component, place the IonTitle with the text 'Logotype' to add a title for this page.

<IonHeader>
  <IonToolbar>
    <IonTitle>Logotype</IonTitle>
  </IonToolbar>
</IonHeader>

7. Add the buttons at the end of the toolbar

After the IonTitle component, include another IonButtons component and set the slot to end. This positions the buttons at the end of the toolbar.

<IonHeader>
  <IonToolbar>
    <IonTitle>Logotype</IonTitle>
    <IonButtons slot='end'>
    </IonButtons>
  </IonToolbar>
</IonHeader>

8. Within the IonButtons add the IonButton component

9. Place the icon within the button

Inside the IonButton component, place the IonIcon component with the properties slot='icon-only', icon={close}, and color='dark' to define that this component should be used as an icon in an option that has no text, using the icon from Ionic icons and styling the color of the icon.

<IonHeader>
  <IonToolbar>
    <IonTitle>Logotype</IonTitle>
    <IonButtons slot='end'>
      <IonButton>
        <IonIcon slot='icon-only' icon={close} color='dark'></IonIcon>
      </IonButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

10. Add the Content component

Following the IonHeader component, add the IonContent component and apply the ion-padding-top class to style the content within.

<IonHeader>
  ...
</IonHeader>
<IonContent className='ion-padding-top'>
</IonContent>

11. Include 'Overview' text inside the Content component

Inside the IonContent component add the IonText component with the property color='medium' to style the text color inside. Within the IonText add the p tag with the class ion-padding-start and place the text 'Overview' inside.

<IonContent className='ion-padding-top'>
  <IonText color='medium'>
    <p className='ion-padding-start'>Overview</p>
  </IonText>
</IonContent>

12. Add the list to organize the content inside

Add the IonList component with the class ion-margin-top and the property lines='none' to style the items inside. This component helps organize the content inside.

<IonContent className='ion-padding-top'>
  <IonText color='medium'>
    <p className='ion-padding-start'>Overview</p>
  </IonText>
  <IonList lines='none' className='ion-margin-top'>
  </IonList>
</IonContent>

13. Add an item to the list

Inside the IonList component, add the IonItem component with the class ion-margin-bottom.

<IonList lines='none' className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
  </IonItem>
</IonList>

14. Insert an icon at the beginning of the item

Within the IonItem add the IonNote component with the properties slot='start' icon={gridOutline} to position the text at the beginning of the item, using the icon from Ionic icons.

<IonList lines='none' className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
    <IonIcon slot='start' icon={gridOutline}></IonIcon>
  </IonItem>
</IonList>

15. Add the IonLabel component with the text 'Dashboard'

<IonList lines='none' className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
    <IonIcon slot='start' icon={gridOutline}></IonIcon>
    <IonLabel>Dashboard</IonLabel>
  </IonItem>
</IonList>

16. Add another IonItem component similar to step 13

17. Add the text within the note to the item

Within the IonItem add the IonNote component with the properties slot='start' icon={pricetagOutline} to position the text at the beginning of the item, using the icon from Ionic icons.

18. Add the IonLabel component with the text 'Products'

19. Add another note after the label

After the IonLabel add the IonNote component with the properties slot='end' icon={chevronDown} to position the text at the end of the item, using the icon from Ionic icons.

<IonList lines='none' className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
    <IonIcon slot='start' icon={gridOutline}></IonIcon>
    <IonLabel>Dashboard</IonLabel>
  </IonItem>
  <IonItem className='ion-margin-bottom'>
    <IonIcon slot='start' icon={pricetagOutline}></IonIcon>
    <IonLabel>Products</IonLabel>
    <IonIcon slot='end' icon={chevronDown}></IonIcon>
  </IonItem>
</IonList>

20. Repeat steps 13 to 15

Add another IonItem. Set the property icon={cartOutline} inside the IonIcon and text 'Inventory' inside the IonLabel component.

21. Repeat steps 13 to 15

Add another IonItem. Set the property icon={homeOutline} inside the IonIcon and text 'Warehouse' inside the IonLabel component.

22. Repeat steps 13 to 15

Add another IonItem. Set the property icon={cubeOutline} inside the IonIcon and text 'Vendor' inside the IonLabel component.

23. Repeat steps 13 to 15

Add another IonItem. Set the property icon={carOutline} inside the IonIcon and text 'Purchase order' inside the IonLabel component.

24. After the IonList add the <br /> tag to create a break line

25. Place and style the 'Account' text component

Add the IonText component with the property color='medium' to style the text color inside. Within the IonText add the p tag with the class ion-padding-start and place the text 'Account' inside.

<IonContent className='ion-padding-top'>
  ...
  <br />
  <IonText color='medium'>
    <p className='ion-padding-start'>Account</p>
  </IonText>
</IonContent>

26. Add the list to style the items inside

Add the IonList component with the class ion-margin-top and the property lines='none' to style the items inside. This component helps organize the content inside.

<IonContent className='ion-padding-top'>
  ...
  <br />
  <IonText color='medium'>
    <p className='ion-padding-start'>Account</p>
  </IonText>
  <IonList lines='none' className='ion-margin-top'>
  </IonList>
</IonContent>

27. Repeat steps 13 to 15

Add the IonItem inside the IonList. Set the property icon={personOutline} inside the IonIcon and text 'Edit profile' inside the IonLabel component.

28. Repeat steps 13 to 15

Add another IonItem. Set the property icon={settingsOutline} inside the IonIcon and text 'Settings' inside the IonLabel component.

29. Repeat steps 13 to 15

Add another IonItem. Set the property icon={logOutOutline} inside the IonIcon and text 'Logout' inside the IonLabel component.

30. After the IonList add the <br /> tag to create a break line

31. Add another item

Add the IonItem component with the property lines='none' to show the item without a border.

<IonContent className='ion-padding-top'>
  ...
  <br />
  <IonItem lines='none'>
  </IonItem>
</IonContent>

32. Place an avatar inside the item

Inside the IonItem, place the IonAvatar to represent a person's avatar. Set the property slot to start to position the avatar at the beginning of the item.

<IonItem lines='none'>
  <IonAvatar slot='start'>
  </IonAvatar>
</IonItem>

33. Within the IonAvatar, add the img tag

We used the value https://ionicframework.com/docs/img/demos/avatar.svg for the src attribute according to the Ionic example​​.

<IonItem lines='none'>
  <IonAvatar slot='start'>
    <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
  </IonAvatar>
</IonItem>

34. Add the block with personal information

Add the div tag to add a block of personal information. Inside the div add the IonLabel component with the text 'Oscar Smith'.

<IonItem lines='none'>
  <IonAvatar slot='start'>
    <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
  </IonAvatar>
  <div>
    <IonLabel>Oscar Smith</IonLabel>
  </div>
</IonItem>

35. Add the email information inside the Note component

After the IonLabel add the IonNote with the text '[email protected]'.

<IonItem lines='none'>
  <IonAvatar slot='start'>
    <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
  </IonAvatar>
  <div>
    <IonLabel>Oscar Smith</IonLabel>
    <IonNote>[email protected]</IonNote>
  </div>
</IonItem>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD
Made in New Zealand 🇳🇿 at  Sliday