{"id":24480393,"url":"https://github.com/otodockal/ngx-van","last_synced_at":"2026-05-14T23:03:49.916Z","repository":{"id":57142366,"uuid":"446425701","full_name":"otodockal/ngx-van","owner":"otodockal","description":"\u003cngx-van\u003e: The Navigation Section element with built-in Mobile Superpowers #angular #nav","archived":false,"fork":false,"pushed_at":"2025-01-20T19:12:24.000Z","size":4059,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-20T20:24:27.145Z","etag":null,"topics":["angular","mobile","responsive-design"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/otodockal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-10T13:02:27.000Z","updated_at":"2025-01-20T19:16:08.000Z","dependencies_parsed_at":"2024-03-20T22:31:03.916Z","dependency_job_id":"44587fd3-7b51-4844-abe6-01f04d1f29fc","html_url":"https://github.com/otodockal/ngx-van","commit_stats":{"total_commits":26,"total_committers":1,"mean_commits":26.0,"dds":0.0,"last_synced_commit":"28a45bf2d0bd4fb322e8bce08db251de475926de"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otodockal%2Fngx-van","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otodockal%2Fngx-van/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otodockal%2Fngx-van/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otodockal%2Fngx-van/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/otodockal","download_url":"https://codeload.github.com/otodockal/ngx-van/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234856259,"owners_count":18897400,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","mobile","responsive-design"],"created_at":"2025-01-21T11:01:36.756Z","updated_at":"2025-10-02T05:30:41.545Z","avatar_url":"https://github.com/otodockal.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Layout Components"],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg width=\"300px\" src=\"./apps/playground/src/assets/logo.png\"\u003e\n\u003c/p\u003e\n\n# \\\u003cngx-van\\\u003e: The Navigation Section element with built-in Mobile Superpowers\n\n\u003e 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.\n\n## Installation\n\n```bash\nnpm install ngx-van\n```\n\n## Demo\n\n-   [Vertical menu, \\\u003cngx-van side=\"start\"\\\u003e](https://stackblitz.com/edit/stackblitz-starters-pddasj3g?file=src%2Fmain.ts)\n\n## TS\n\n```ts\nimport { NgxVan, NgxVanItem, NgxVanTrigger } from 'ngx-van';\n```\n\n## HTML\n\n```angular\n\u003cbutton [ngxVanTrigger]=\"van\"\u003e\n    \u003cmat-icon\u003e{{ van.api.isOpen() ? 'close' : 'menu' }}\u003c/mat-icon\u003e\n\u003c/button\u003e\n\n\u003cngx-van\n    [side]=\"'end'\"\n    [breakpoint]=\"991\"\n    [closeOnEscapeKeyClick]=\"'dispose'\"\n    [closeOnBackdropClick]=\"'close'\"\n    [transition]=\"'transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)'\"\n    #van\n\u003e\n    \u003cul\u003e\n        \u003cli\u003e\n            \u003ca ngx-van-item routerLink=\"/inbox\"\u003eInbox\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca ngx-van-item routerLink=\"/starred\"\u003eStarred\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca ngx-van-item routerLink=\"/important\"\u003eImportant\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca ngx-van-item routerLink=\"/drafts\"\u003eDrafts\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca ngx-van-item routerLink=\"/deleted\"\u003e\n                @if (van.api.nav() === 'desktop') {\n                    \u003capp-icon\u003edelete\u003c/app-icon\u003e\n                }\n                Deleted\n            \u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/ngx-van\u003e\n```\n\n## Animations\n\nYou can customize the transition animation. Here are some examples:\n\n-   Default elastic effect: `transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)`\n-   Smooth linear: `transform 300ms linear`\n-   Ease in-out: `transform 350ms ease-in-out`\n-   Quick snap: `transform 200ms ease-out`\n-   Slow and smooth: `transform 600ms cubic-bezier(0.4, 0, 0.2, 1)`\n-   Sharp acceleration: `transform 300ms cubic-bezier(0.4, 0, 1, 1)`\n-   Gentle deceleration: `transform 300ms cubic-bezier(0, 0, 0.2, 1)`\n-   Spring-like: `transform 450ms cubic-bezier(0.175, 0.885, 0.32, 1.275)`\n-   Bounce effect: `transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55)`\n\n## CSS\n\n-   Required CSS for mobile navigation styling\n-   Add the following snippet to your global `styles.scss` file\n-   Customize the styles to match your design system\n\n```scss\n.ngx-van-mobile {\n    nav {\n        top: 60px;\n        width: 300px;\n        height: 100%;\n        background-color: rgba(0, 0, 0, 0.8);\n        ul {\n            list-style-type: none;\n            margin: 0;\n            padding: 20px;\n            a {\n                display: flex;\n                align-items: center;\n                width: 100%;\n                height: 50px;\n                text-align: left;\n                color: #fff;\n            }\n        }\n    }\n}\n.ngx-van-mobile-backdrop {\n    position: fixed;\n    top: 60px !important;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    backdrop-filter: blur(12px);\n    background-color: rgba(0, 0, 0, 0.5);\n}\n```\n\n## SSR\n\n-   Add this CSS snippet to prevent the desktop navigation from briefly appearing on mobile devices during server-side rendering\n-   Only required when using Server-Side Rendering (SSR)\n\n```scss\n.ngx-van-ssr {\n    @media screen and (max-width: 991px) {\n        display: none;\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotodockal%2Fngx-van","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fotodockal%2Fngx-van","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotodockal%2Fngx-van/lists"}