ngx-animated-menu

Angular animated menu library, a sleek and dynamic solution to enhance user interaction in web and app interfaces. With a collection of captivating animations and smooth transitions, our library offers a visually appealing way to navigate through menus, creating a seamless and engaging user experience. Whether you're designing a website or a mobile application, our animated menu library adds an extra layer of polish and interactivity to elevate your project to the next level

Features

Menu Indicator Animating to selected Menu
Responsive Design
Custom Color Option
Dynamic String & Html Content

Demo

https://srinivasanofficial.github.io/ngx-animated-menu-demo/

Installation

Install ngx-animated-menu via:

  npm i ngx-animated-menu

Once installed you need to import our main module in your application module:

  import { NgxAnimatedMenuModule } from 'ngx-animated-menu';

  @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NgxAnimatedMenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Usage

<ngx-animated-menu
          (menuEmitData)="getEmitData($event)"
          [configData]="configData"
          [menuData]="menuData"
></ngx-animated-menu>

@Input menuData

Parameter	Type	Default Value
`menuLabel`	`String or HTML content`
`value`	`any`
`selected` (optional)	`boolean`	true

[
    { menuLabel: 'Home', value: 'Home' },
    { menuLabel: 'About', value: 'About' },
    { menuLabel: 'Service', value: 'Service' },
    { menuLabel: 'Blog', value: 'Blog' },
    { menuLabel: 'Contact', value: 'Contact' }
]

@Input configData (Optional)

Parameter	Type	Default Value
`menuColor`	`Hex Color code`	'#4c64f5 '
`indicatorColor`	`Hex Color code`	'#ffffff'

{
    menuColor: '#4c64f5',
    indicatorColor: '#ffffff'
}

@Output menuEmitData (Optional)

Emit the current Array of data when clicking the corresponding Menu

Authors

@SrinivasanOfficial

Contributing

I am very appreciate for your ideas, proposals and found bugs which you can leave in github issues. Thanks in advance!