I have an Angular project with Bootstrap for styling. I want to make a menu bar with a dropdown icon when the screen is too small to show al the menu items. When the screen is large, all the menu items are shown and when the screen is small the expand icon is shown, but the menu does not expand when clicking on the icon.
I have added bootstrap to my Angular project by doing the following: ng add #ng-bootstrap/ng-bootstrap
My html code looks like this (It was copied from the Bootstrap website):
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</nav>
This are the dependencies in the package.json file:
"dependencies": {
"#angular/animations": "^14.2.0",
"#angular/cdk": "^14.2.2",
"#angular/common": "^14.2.0",
"#angular/compiler": "^14.2.0",
"#angular/core": "^14.2.0",
"#angular/flex-layout": "^14.0.0-beta.40",
"#angular/forms": "^14.2.0",
"#angular/localize": "^14.2.0",
"#angular/material": "^14.2.2",
"#angular/platform-browser": "^14.2.0",
"#angular/platform-browser-dynamic": "^14.2.0",
"#angular/router": "^14.2.0",
"#popperjs/core": "^2.11.6",
"#ng-bootstrap/ng-bootstrap": "^13.0.0",
"bootstrap": "^5.3.0-alpha1",
"jquery": "^3.6.3",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
I did the bootstrap.css import in the styles.css file like this
#import "~bootstrap/dist/css/bootstrap.css";
Did I forget some imports or did I do something else wrong?
You are not using ng-bootstrap ngbCollapse directive to handle collapse.
Look at this link, You will find complete example (Responsive Navbar) of menu with collapse and expand.
Related
I'm making a website with Bootstrap and when I use the following code for the navbar and reduce the dimensions of the display, the hamburger menu will not expand down and show the menu options:
<nav class="navbar navbar-expand-lg fixed-top">
Title
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menuItems">
<ul class="navbar-nav">
<li class="nav-item"> <a target="_parent" class="nav-item nav-link active" href="index.html"> Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-item nav-link active" href="#about">About</a></li>
</ul>
</div>
</nav>
The button is clickable but it's not showing the dropdown menu. Is it possible that someone can let me know what I'm doing wrong?
Thanks!
Your code is working in the snippet, make sure you have included Bootstrap's JavaScript file as well!
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<nav class="navbar navbar-expand-lg fixed-top">
Title
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menuItems">
<ul class="navbar-nav">
<li class="nav-item"> <a target="_parent" class="nav-item nav-link active" href="index.html"> Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-item nav-link active" href="#about">About</a></li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
Bootstrap's Javascript controls the animations of Bootstrap components like the navbar or the carousel. Link the js files using the script tags. I would prefer not to use the minified versions (files with .min extension)
I have a standard bootstrap navbar and there are two options or behaviours.
When the screen is wide enough then all menu elements are visible
When the screen is small then all elements go under the hamburger icon.
How can I create a third option to hide menu elements one by one if the screen is resizing until it reaches mobile width?
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link" href="#">Disabled</a>
<a class="nav-item nav-link" href="#">More</a>
<a class="nav-item nav-link" href="#">More Menu</a>
<a class="nav-item nav-link" href="#">Another One</a>
<a class="nav-item nav-link" href="#">Third</a>
</div>
</div>
</nav>
You can do standard Bootstrap display classes like d-none d-md-block in the navbar and just reverse that in the hamburger menu, d-md-none...
or media queries if you want a more specific screen size adjustment.
I am unable to get the dropdown menu working. Whenever I click on the Profile link to drop down and view Account and Logout options it logs me out of my angular app.
<nav class="navbar navbar-expand-lg bg-dark navbar-fixed-top">
<a class="navbar-brand text-white" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" routerLink="/dashboard">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" routerLink="/dashboard">Documents</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Profile
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" routerLink="/account">Account</a>
<a class="dropdown-item" routerLink="/account" (click)="authService.SignOut()">Log Out</a>
</ul>
</li>
</ul>
</div>
</nav>
UPDATE
I know may be missing the sequence of including the .js or .css hence pasting the content of my angular.json & style.css.
styles.css
#import '~bootstrap/dist/css/bootstrap.min.css';
#import "~bootstrap/dist/css/bootstrap.css";
#import "~font-awesome/css/font-awesome.css";
angular.json
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/font-awesome/css/font-awesome.css",
"src/custom.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
The code snipped above is in pure HTML and Bootstrap. I have run it as you have provided, and it runs as expected. The dropdown works in both desktop and mobile view. You may want to tweak the coloring of the mobile burger icon, as its invisible, but otherwise functional. I have included some screenshots for your reference.
My best guess is that the issue you're facing has to do with your Angular setup rather than Bootstrap and HTML.
I have an Angular project without Jquery.
I want to have a navbar with mdbootstrap, But when I write mdbootstrap code in my html, collapse does not work.
Here is my html content.
<header>
<nav class="navbar navbar-expand-lg navbar-dark primary-color">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
The documentation is not very user-friendly, but still goes over the basic navbar... the classes use tell it when to move from hanburger menu to expanded form (navbar-expand-lg in our case); the rest is just dummy text in the example below.
relevant HTML:
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark pink ie-nav" [containerInside]="false">
<mdb-navbar-brand>
<a class="logo navbar-brand" href="#"><strong>Navbar</strong></a>
</mdb-navbar-brand>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item active waves-light" mdbWavesEffect>
<a class="nav-link">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link">Features</a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link">Opinions</a>
</li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link"><mdb-icon fab icon="facebook-f"></mdb-icon></a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link"><mdb-icon fab icon="twitter"></mdb-icon></a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link"><mdb-icon fab icon="instagram"></mdb-icon></a>
</li>
</ul>
</links>
</mdb-navbar>
relevant CSS:
.navbar-toggler-icon{ border:2px solid red;}
.navbar-brand, .nav-link{color:red !important;}
complete working stackblitz here
I'm posting the best way using Angular Material library to make sidenav as main nav of your application. You no need to install any other librarys then Angular Material
npm i --save #angular/material #angular/cdk #angular/animations
ng add #angular/material
Here is a code: https://stackblitz.com/edit/angular-c8gpuh
Here is an video tutorial: https://www.youtube.com/watch?v=Q6qhzG7mObU
And in your app.component.html:
<sidenav-autosize-example>
<router-outlet></router-outlet>
</sidenav-autosize-example>
And remember to import nessesery modules to your project:
import { NgModule } from '#angular/core';
import { MatSidenavModule, MatToolbarModule, MatButtonModule, MatIconModule, MatProgressBarModule } from '#angular/material';
#NgModule({
declarations: [],
imports: [
MatSidenavModule,
// MatToolbarModule,
MatButtonModule,
MatIconModule,
// MatProgressBarModule,
],
exports: [
MatSidenavModule,
// MatToolbarModule,
MatButtonModule,
MatIconModule,
// MatProgressBarModule,
],
})
export class MaterialModule { }
When I have a small screen width and I'm trying to click the hamburger to toggle the navigation - nothing happens. I've already tried to solve the problem with already asked questions, but I haven't been able to find my error.
Additionally as soon as I remove navbar-dark the hamburger vanishes - having this class added to the object again, changes the color of the navbar to white, which I don't want it to.
<nav class="navbar navbar-dark navbar-expand-lg">
<div class="container-fluid px-0">
<div class="row w-100">
<div class="col-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-10">
<div class="collapse justify-content-end navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book Me</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css",
"node_modules/aos/dist/aos.css"
],
"scripts": [
"node_modules/popper.js/dist/popper.min.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Package.json:
"dependencies": {
"#angular/animations": "^7.2.11",
"#angular/cdk": "^7.3.6",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/fire": "^5.1.1",
"#angular/forms": "~7.2.0",
"#angular/material": "^7.3.6",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"aos": "^2.3.4",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"firebase": "^5.8.5",
"jquery": "^3.3.1",
"ng-recaptcha": "^4.2.1",
"popper.js": "^1.14.7",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
You have a few issues:
install bootstrap to angular 6+ as here
Add bg-dark class to <nav>
use this example to demo bootstrap behavior in angular
See here working code
HTML
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<div class="container-fluid px-0">
<div class="row w-100">
<div class="col-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" (click)="isShown = !isShown" >
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-10">
<div class="collapse justify-content-end navbar-collapse" [ngClass]="{ 'show': isShown }" id="navbarTogglerDemo03">
<ul class="navbar-nav mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#" (click)="isShown = false" >Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" (click)="isShown = false" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" (click)="isShown = false" >Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" (click)="isShown = false" >Book Me</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
TS
isShown:boolean=false;