---
title: "Så här skapar du din navigeringsmeny | Handledning för e-handelsapp - GoodBarber"
description: "Hej och välkommen till ditt GoodBarber-backoffice\r \r Idag kommer vi att prata om de olika navigationsmallarna\r De är mycket viktiga av många anledningar:\r De strukturerar din butik\r De är en del av d…"
canonical_url: "https://se.goodbarber.com/tutorials/shop/design/sa-har-skapar-du-din-navigeringsmeny/"
lang: sv
---

# Så här skapar du din navigeringsmeny | Handledning för e-handelsapp - GoodBarber

[Tillbaka](https://se.goodbarber.com/tutorials/shop/)

# Så här skapar du din navigeringsmeny

Hej och välkommen till ditt GoodBarber-backoffice

Idag kommer vi att prata om de olika navigationsmallarna
De är mycket viktiga av många anledningar:
De strukturerar din butik
De är en del av den slutliga designen av din app
De spelar en viktig roll i användarupplevelsen för dina kunder

Det är huvudnavigeringen i din butik.

För att välja en, gå till menyn Innehåll & Design, Navigationsmeny

Välj den mall som du vill använda i din app
Varje navigeringsmall har sina egna egenskaper och kommer att förbättra de olika delarna av din butik, beroende på dina behov.

Låt oss välja TabBar-mallen.

Den består av 2 huvuddelar.
Huvudnavigeringen som kommer att visas längst ner i din app
Och en sekundär navigering som kommer att finnas i en separat meny.

För att organisera mina sektioner behöver jag helt enkelt dra dem mellan huvudnavigeringen och menyn Övrigt.

Min första sektion är mitt hem. Sedan lägger jag till min lista över samlingar som heter Collection, min försäljningssamling och användarprofilen. Allt annat kommer att finnas i menyn Övrigt.

Jag lägger till i informationsfältet videorna om samlingarna och listan över samlingar.

Jag vill ändra ikonen för Mitt hem
Klicka bara på den och voila. Jag lägger till en anpassad ikon, men du kan också välja en från vårt ikonbibliotek. Jag lägger till den detaljerade videon om hur man ändrar ikonerna i informationsfältet.

Jag kan också markera ett avsnitt genom att ändra färgen på ikonen och teckensnittet. Låt oss göra detta för Sales-kollektionen.

I avsnittet Inställningar i navigeringsmenyn kan du också ändra utformningen av navigeringsmenyn. Det allmänna teckensnittet, visa eller inte visa titlarna under ikonerna, färgen på ikonerna, separatorer etc.

Jag är nöjd med min slutliga design

Låt mig visa från klientsidan. Detta är TabBar-designen
För att ge dig en uppfattning om de andra versionerna:
Svep
Liten svepning
Rutnät
Och skiffer

Du vet nu hur du ställer in navigeringsmenyn i din butik

Vi ses mycket snart för en annan handledning

## Relaterade videor

[DesignSå här anpassar du menyikonerna](/tutorials/shop/design/sa-har-anpassar-du-menyikonerna/)

![Så här anpassar du menyikonerna](https://portal.ww-cdn.com/portal_static/images/videos_shop12.6eeb6d5a859c.jpg)

[DesignSå här ställer du in startsidan för din app](/tutorials/shop/design/sa-har-staller-du-in-startsidan-for-din-app/)

![Så här ställer du in startsidan för din app](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.jpg)

[DesignSå här anpassar du din splashscreen](/tutorials/shop/design/sa-har-anpassar-du-din-splashscreen/)

![Så här anpassar du din splashscreen](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[DesignSå här ställer du in rubriken i din butik](/tutorials/shop/design/sa-har-staller-du-in-rubriken-i-din-butik/)

![Så här ställer du in rubriken i din butik](https://portal.ww-cdn.com/portal_static/images/videos_shop15.1e15b7c0b749.jpg)

[DesignSå här ställer du in den globala stilen för din butik](/tutorials/shop/design/sa-har-staller-du-in-den-globala-stilen-for-din-butik/)

![Så här ställer du in den globala stilen för din butik](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DesignSå här anpassar du huvudikonerna i din butik](/tutorials/shop/design/sa-har-anpassar-du-huvudikonerna-i-din-butik/)

![Så här anpassar du huvudikonerna i din butik](https://portal.ww-cdn.com/portal_static/images/videos_shop17.5fb60f1ec20f.jpg)

[DesignSå utformar du sektionerna i din butik](/tutorials/shop/design/sa-utformar-du-sektionerna-i-din-butik/)

![Så utformar du sektionerna i din butik](https://portal.ww-cdn.com/portal_static/images/videos_shop18.471e5731e7e3.jpg)

[DesignHur man kopplar loss designen av en sektion](/tutorials/shop/design/hur-man-kopplar-loss-designen-av-en-sektion/)

![Hur man kopplar loss designen av en sektion](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DesignHur väljer man rubrikstorlek?](/tutorials/shop/design/hur-valjer-man-rubrikstorlek/)

![Hur väljer man rubrikstorlek?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)