Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vojvodicn23/ngx-universal-navbar
This is universal navbar component for Angular
https://github.com/vojvodicn23/ngx-universal-navbar
angular menubar navbar navigation routing siderbar
Last synced: 6 days ago
JSON representation
This is universal navbar component for Angular
- Host: GitHub
- URL: https://github.com/vojvodicn23/ngx-universal-navbar
- Owner: vojvodicn23
- License: mit
- Created: 2024-02-19T14:28:24.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-02-21T15:08:50.000Z (9 months ago)
- Last Synced: 2024-09-26T04:44:40.725Z (about 2 months ago)
- Topics: angular, menubar, navbar, navigation, routing, siderbar
- Language: TypeScript
- Homepage:
- Size: 212 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Universal Navbar
Suported Angular versions: 17.
[Click here to try it on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-f3b24p)
## Usage
Add the package as a dependency to your project using:
```
npm install angular-universal-navbar
```
Add module to you app.module imports:
```typescript
import { AngularUniversalNavbarComponent, NavItem } from 'angular-universal-navbar';
...
@Component({
selector: 'app-root',
standalone: true,
imports: [AngularUniversalNavbarComponent],
...
})
```
Define navbar items in the component(OPTIONAL) If you do not define the navbar items the navbar will not be shown:
```typescript
navItems = [
{
name: 'First',
route: 'first',
styles: {
marginLeft: 'auto'
},
},
{
name: 'Second',
children: [
{
name: 'Second First',
route: 'second-first'
},
{
name: 'Second Second',
route: 'second-second'
},
],
},
{
name: 'Fifth',
styles: {
marginRight: 'auto'
},
classes: [
'your-custom-class'
],
},
{
component: SettingsComponent,
},
{
component: UserComponent,
componentData: {
user: 'NV'
}
},
];
```
In the component template add selector and pass the navbar items.
Also, inside selector add router-outlet or any app content you wish.
```html
```
Define sidebar items in the component(OPTIONAL) If you do not define the sidebar items the sidebar will not be shown:
```typescript
sideItems: NavItem[] = [
{
component: LogoComponent,
styles: {
marginTop: '5px',
marginBottom: '50px'
},
},
{
name: 'Sidebar first',
route: 'first',
},
{
name: 'Sidebar third',
route: 'third'
},
{
name: 'Sidebar fourth',
route: 'fourth'
},
{
name: 'Sidebar fifth',
},
];
```
In the component template add selector and pass the sidebar items.
Also, inside selector add router-outlet or any app content you wish.
```html
```
Navitem is defined as follows.
```typescript
export interface NavItem {
name?: string;
route?: string;
children?: NavItem[];
component?: Type;
componentData?: any;
styles?: {[key: string]: string};
classes?: string[];
}
```
There are three possible options:
1. Define only name and route which will result as default navbar item as a text field:
```typescript
{
name: 'Third',
route: 'third'
},
```
2. Define name and its children and it will result as dropdown:
```typescript
{
name: 'Second',
children: [
{
name: 'Second First',
route: 'second-first'
},
{
name: 'Second Second',
route: 'second-second'
},
],
},
```
3. Create custom component and render it inside navbar.
```typescript
{
component: UserComponent,
componentData: {
user: 'NV'
}
},
```
You are able to pass data to custom component, shown above which is equivalent to this:
```html
```
For all options, you are able to pass custom classes and styles:
```typescript
{
name: 'Fifth',
styles: {
marginRight: 'auto'
},
classes: [
'your-custom-class'
],
},
```
You can change styles directly in your global styles file (styles.css or styles.scss).
```css
.universal-navbar .active, .universal-sidebar .active{
color: black !important;
background-color: rgb(234, 233, 233) !important;
}
.your-custom-class{
background-color: burlywood;
}
```