Si queremos crear una barra de navegación en HTML, debemos seguir los pasos que se detallan a continuación. Siguiendo estos pasos, podemos crear fácilmente la barra de navegación.

Paso 1: En primer lugar, tenemos que escribir el código HTML en cualquier editor de texto o abrir el archivo HTML existente en el editor de texto en el que queremos crear una barra de navegación.

 Make a Navigation Bar 

Paso 2: Ahora, tenemos que definir la etiqueta en la etiqueta donde queremos hacer la barra.

 You are at JavaTpoint Site..... 

Paso 3: Después de eso, tenemos que definir el

etiqueta, que se utiliza para mostrar la lista desordenada. Y luego tenemos que definir los elementos de la lista en el
• etiqueta. Tenemos que definir aquellos elementos que queremos mostrar en la barra de navegación.

 <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site..... 

Etapa 4: Después de eso, tenemos que colocar el cursor justo después del cierre de la etiqueta del título. Y luego tenemos que definir la etiqueta. Paso 4: Después de eso, tenemos que colocar el cursor justo después del cierre de la etiqueta del título. Y luego tenemos que definir la etiqueta.

 Make a Navigation Bar 

Paso 5: Ahora, tenemos que especificar diferentes atributos de identificación que se utilizan para establecer la posición y el color de la barra de navegación. Entonces, tenemos que usar el siguiente código en la etiqueta head. También podemos cambiar el valor de las propiedades según nuestros requerimientos.

 body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } 

Paso 6: Después de eso, tenemos que escribir la etiqueta justo antes de la etiqueta de apertura. Y también tenemos que cerrar esta etiqueta. Y, por último, tenemos que guardar el archivo HTML y luego ejecutar el archivo en el navegador.

 Make a Navigation Bar body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site..... 

El resultado del código HTML anterior se muestra en la siguiente captura de pantalla: