https://github.com/otodockal/ngx-van

<ngx-van>: The Navigation Section element with built-in Mobile Superpowers #angular #nav
https://github.com/otodockal/ngx-van

angular mobile responsive-design

Last synced: 14 days ago
JSON representation

<ngx-van>: The Navigation Section element with built-in Mobile Superpowers #angular #nav

• Host: GitHub
• URL: https://github.com/otodockal/ngx-van
• Owner: otodockal
• License: mit
• Created: 2022-01-10T13:02:27.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2025-01-20T19:12:24.000Z (15 days ago)
• Last Synced: 2025-01-20T20:24:27.145Z (15 days ago)
• Topics: angular, mobile, responsive-design
• Language: TypeScript
• Homepage:
• Size: 3.87 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular - ngx-van - Tiny replacement for HTML nav element with mobile side nav menu built-in. Good old nav element on desktop, sliding side nav on mobile. No duplication. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-van - Tiny replacement for HTML nav element with mobile side nav menu built-in. Good old nav element on desktop, sliding side nav on mobile. No duplication. (Table of contents / Third Party Components)

README

        


 



# \: The Navigation Section element with built-in Mobile Superpowers

> Tiny replacement for HTML nav element with mobile side nav menu built-in. Good old nav element on desktop, sliding side nav on mobile. No duplication.

## Installation

```bash

npm install ngx-van

```

```bash

yarn add ngx-van

```

## Demos

-   [Vertical menu, \](https://stackblitz.com/edit/angular-ivy-afbbds?file=src/app/app.component.html)

-   [Vertical menu, \](https://stackblitz.com/edit/angular-ivy-51wp1y?file=src%2Fapp%2Fapp.component.html)

-   [Horizontal menu, \](https://stackblitz.com/edit/angular-ivy-yczdag?file=src%2Fapp%2Fapp.component.html)

-   [Horizontal menu, \](https://stackblitz.com/edit/angular-ivy-mqsvwt?file=src%2Fapp%2Fapp.component.html)

## TS

```ts

import { NgxVan, NgxVanItem, NgxVanTriggerFor } from 'ngx-van';

```

## HTML

```html

    {{ van.vm.isOpen() ? 'close' : 'menu' }}

    


        


            Inbox

        

        


            Starred

        

        


            Important

        

        


            Drafts

        

        


            

                @if (van.vm.menu() === 'mobile') {

                    delete

                }

                Deleted

            

        

    


```

## CSS

-   CSS for mobile menu only.

-   Add snippet to style.scss. It has to be declared in the global scope.

-   Change styling according to your preferences.

```scss

.ngx-van-mobile {

    nav {

        top: 60px;

        width: 300px;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.8);

        ul {

            list-style-type: none;

            margin: 0;

            padding: 20px;

            a {

                display: flex;

                align-items: center;

                width: 100%;

                height: 50px;

                text-align: left;

                color: #fff;

            }

        }

    }

}

.ngx-van-mobile-backdrop {

    position: fixed;

    top: 60px !important;

    right: 0;

    width: 100%;

    height: 100%;

    backdrop-filter: blur(12px);

    background-color: rgba(0, 0, 0, 0.5);

}

```

## SSR

-   In order to prevent desktop menu flickering on mobile (when rendered on the server), add the following CSS snippet.

-   Use only if your website is SSR.

```scss

.ngx-van-ssr {

    @media screen and (max-width: 991px) {

        display: none;

    }

}

```