Mobile Navigation
Navigation in mobile view
setup
Import the MobileNavigation component in a script tag.
Svelte Copy
import { MobileNavigation } from "@mgisolutions/design-system/svelte";
Basic usage
Basic usage Mobile Navigation
Demonstrate
Svelte Copy
const navigations = [
{
icon: homeFilledIcon,
name: "Home",
link: "/",
notification: 0,
type: "home",
urlActive: ["/", "/customer/account/logout-success"],
},
{
icon: hamburgerMenuIcon,
name: "Products",
link: "/category",
notification: 0,
type: "products",
urlActive: ["/deals", "/category"],
},
{
icon: shoppingCartFilledIcon,
name: "Cart",
link: "/mgicheckout/cart",
notification: 0,
type: "carts",
urlActive: [],
},
{
icon: isAutoship ? refreshLoadIcon : favoriteFilledIcon,
name: isAutoship ? "Autoship" : "Wishlist",
link: "/wishlist",
notification: 0,
type: "wishlist",
urlActive: ["/wishlist"],
},
{
icon: userFilledIcon,
name: "More",
link: "#!",
notification: 0,
type: "more",
urlActive: ["/sales/guest/form"],
},
];
<MobileNavigation {isAuth} {isAutoship} {navigations} {pathname} />
Component Data
- props
- events
| Name | Description | Type | Default |
|---|---|---|---|
| isAuth | If user login , value isAuth = true | boolean | false |
| isAutoship | Value of autoship | boolean | false |
| pathname | url.pathname of current page | string | |
| navigations | List name and icon display in mobile navigation | Array | [ { icon: homeFilledIcon, name: "Home", link: "/", }, { icon: hamburgerMenuIcon, name: "Products", link: "/category", }, { icon: shoppingCartFilledIcon, name: "Cart", link: "/cart", }, { icon: isAutoship ? refreshLoadIcon : favoriteFilledIcon, name: isAutoship ? "Autoship" : "Wishlist", link: "/wishlist", }, { icon: userFilledIcon, name: "More", link: "#!", }, ]; |
| notification | Count of product add to cart or add to wishlist,... | string | number | 0 |
| type | Type of each element | enum:home,products,carts,wishlist,autoShip,more, | |
| urlActive | list url that if placed on that page, the element will be active | Array | undefined |