Introducción a la navegación CSS

Posted on by Rudeus Greyrat

Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que establecen la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Esta estructura sistemática garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está inspirado en los principios de CSS orientados a objetos, CSS fundamental y arquitectura BEM. Es altamente reutilizable y flexible. Está construido con el sistema de diseño de GitHub.

Primer CSS Navigation proporciona la utilidad para crear una barra de navegación o un menú de navegación de una página web, que es uno de los componentes más importantes de un sitio web. Nos permitió crear barras de navegación o menús de navegación de diferentes diseños y diseños. Nos permite crear componentes de navegación más flexibles y personalizables. 

Varios diseños y las clases específicas:

Menú básico: un menú básico es una lista vertical de enlaces de navegación.

Clases básicas de menú:

  • menú: Esta clase se agrega al contenedor que contiene los enlaces del componente de navegación.
  • elemento de menú: esta clase se agrega a los enlaces de navegación del componente de navegación.
  • menu-heading: esta clase es una parte opcional de un componente de navegación que se usa para agregar un encabezado al componente de navegación.

La etiqueta de anclaje cuyo atributo aria-current tiene el valor de «página» se mostrará como seleccionada.

Sintaxis:

<nav class="menu">
  <span class="menu-heading">...</span>
  <a class="menu-item" aria-current="..">...</a>
  <a class="menu-item">...</a>
</nav>

Navegación subrayada: esto se usa para aplicar estilo a los componentes de navegación con un estado seleccionado subrayado mínimo, que generalmente se usa para la navegación ubicada en la parte superior de la página.

Clases de navegación subrayadas:

  • UnderlineNav: esta clase se agrega al contenedor que tiene un cuerpo de componente de navegación.
  • UnderlineNav-body: Esto encierra todos los enlaces del componente de navegación subrayado.
  • UnderlineNav-item: esta clase se utiliza para indicar los enlaces de navegación del componente de navegación.
  • UnderlineNav-actions: esta clase se utiliza para colocar otro elemento, como un botón, en el lado opuesto de los elementos de navegación.
  • UnderlineNav–right: esta clase alinea la navegación a la derecha.
  • UnderlineNav–full: Se usa con la clase UnderlineNav-container para hacer que la navegación ocupe todo el ancho del contenedor.

Sintaxis:

<nav class="UnderlineNav UnderlineNav--full">
  <div class="container-lg UnderlineNav-container">
        <div class="UnderlineNav-body">
              <a class="UnderlineNav-item" aria-current="..">...</a>
              <a class="UnderlineNav-item">...</a>
        </div>
        <div class="UnderlineNav-actions">
            ...
        </div>
  </div>
</nav>

Navegación lateral: es una lista vertical de enlaces de navegación que generalmente se usa a la izquierda de una página. Podemos usar una clase de cuadrícula de columna o un estilo en línea para dimensionarlo, y las utilidades de Flexbox para posicionarlo en el contenido.

Clases de navegación lateral:

  • SideNav: esta clase se agrega al contenedor que contiene los enlaces del componente de navegación lateral.
  • SideNav-item: esta clase se agrega a los enlaces de navegación del componente de navegación lateral.
  • SideNav-subItem: al usar esta clase, podemos crear un componente de navegación lateral que es mucho más liviano y tiene una apariencia condensada sin bordes.

Sintaxis:

<nav class="SideNav">
      <a class="SideNav-item">...</a>
      <a class="SideNav-item" aria-current="...">...</a>
      <nav class="SideNav">
        <a class="SideNav-subItem" aria-current="...">...</a>
        <a class="SideNav-subItem">...</a>
        <a class="SideNav-subItem">...</a>
      </nav>
</nav>

Navegación por pestañas: esta navegación es necesaria para crear una navegación con opciones de alternancia, como alternar entre vistas, etc. Esto nos proporciona una fila de pestañas horizontales alineadas a la izquierda.

  • tabnav: esta clase se le da al contenedor que tendrá la pestaña de navegación dentro de él.
  • tabnav-tabs: se otorga a los elementos de navegación que contendrán todas las pestañas en su interior.
  • tabnav-tab: Especifica las pestañas individuales del componente de navegación.
  • tabnav-extra: esta clase nos ayuda a agregar textos y enlaces adicionales dentro de la pestaña de navegación.

Sintaxis:

<div class="tabnav">
      <div class="float-right">
        <a class="tabnav-extra">...</a>
        <a class="tabnav-extra">...</a>
      </div>
      <nav class="tabnav-tabs">
        <a class="tabnav-tab" aria-current="...">...</a>
        <a class="tabnav-tab">...</a>
      </nav>
</div>

Subnavegación: esta navegación se usa normalmente cuando tenemos una interfaz tipo tablero con otro conjunto de navegación encima. Nos ayuda a distinguir la jerarquía de navegación.

  • subnav: esta clase se agrega al elemento nav que contiene todos los enlaces de navegación para el componente de subnavegación.
  • subnav-item: esta clase especifica los enlaces en el componente de navegación.
  • subnav-links: cuando tenemos algo más que enlaces en el componente de subnavegación, usamos esta clase para especificar cuáles serán los enlaces para ello.
  • subnav-search: Esto crea una barra de búsqueda para nosotros en el componente de sub-navegación.

Sintaxis:

<div class="subnav">
      <nav class="subnav-links">
        <a class="subnav-item" aria-current="...">...</a>
        <a class="subnav-item">...</a>
        <a class="subnav-item">...</a>
      </nav>
      <div class="subnav-search float-left">
        <input type="search" class="form-control subnav-search-input"/>
      </div>
</div>

Ejemplo 1: El siguiente ejemplo ilustra una barra de navegación subrayada . Se usan las clases UnderlineNav–full y UnderlineNav-actions , y esta última se usa para agregar un botón de contribución.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
    <title>Primer CSS Navigation</title>
</head>
  
<body>
    <div class="m-4">
        <h1 class="color-fg-success"> 
            GeeksforGeeks 
        </h1>
          
        <h3>Primer CSS Navigation</h3><br />
    </div>
  
    <nav class="UnderlineNav UnderlineNav--full" 
        aria-label="Foo bar">
        <div class="container-lg UnderlineNav-container">
            <div class="UnderlineNav-body mr-5">
                <a class="UnderlineNav-item" 
                    href="#url" aria-current="page">
                    Data Structures
                </a>
  
                <a class="UnderlineNav-item" 
                    href="#url">Algorithms
                    <span class="Counter">10</span>
                </a>
                <a class="UnderlineNav-item" href="#url">
                    Topic-wise Practice
                </a>
                <a class="UnderlineNav-item" href="#url">
                    Competitive Programming
                </a>
                <a class="UnderlineNav-item" href="#url">
                    C++
                </a>
                <a class="UnderlineNav-item" href="#url">
                    Java
                </a>
            </div>
            <div class="UnderlineNav-actions">
                <a class="btn btn-sm">Contribute</a>
            </div>
        </div>
    </nav>
</body>
  
</html>

Producción:

 

Ejemplo 2: El siguiente ejemplo ilustra una barra de navegación lateral. Estamos agregando un avatar a los enlaces de navegación y al SideNav-subItem para agregar un submenú.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
    <title>Primer CSS Navigation</title>
</head>
  
<body>
    <div class="m-4">
        <h1 class="color-fg-success"> 
            GeeksforGeeks
        </h1>
          
        <h3>Primer CSS Navigation</h3><br/>
    </div>
  
    <nav class="SideNav border ml-4" 
        style="max-width:20rem">
        <a class="SideNav-item" href="#url">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
                class="avatar avatar-2">
            <span>Data Structures</span>
        </a>
          
        <a class="SideNav-item" href="#url" 
            aria-current="page">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
                class="avatar avatar-2">
            <span>Algorithms</span>
        </a>
          
        <nav class="SideNav color-bg-default border-top py-3" 
            style="padding-left:44px">
            <a class="SideNav-subItem" href="#url" 
                aria-current="page">Java</a>
            <a class="SideNav-subItem" href="#url">C++</a>
            <a class="SideNav-subItem" href="#url">Python</a>
        </nav>
  
        <a class="SideNav-item" href="#url">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
                class="avatar avatar-2">
            <span>Competitive Programming</span>
        </a>
    </nav>
</body>
</html>

Producción:

 

Ejemplo 3: El siguiente ejemplo ilustra una barra de navegación de pestañas. Estamos agregando un avatar a los enlaces de navegación y un botón Contribuir a la derecha de la barra de navegación.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
    <title>Primer CSS Navigation</title>
</head>
  
<body>
    <div class="m-4">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
          
        <h3>Primer CSS Navigation</h3><br />
    </div>
  
    <div class="tabnav">
        <a class="btn btn-sm float-right mr-4" href="#url" 
            role="button">Contribute</a>
        <nav class="tabnav-tabs" aria-label="Foo bar">
            <a class="tabnav-tab" href="#url" aria-current="page">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
                    class="avatar avatar-2">
                <span>Data Structures</span>
                <span class="Counter">2</span>
            </a>
  
            <a class="tabnav-tab" href="#url">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
                    class="avatar avatar-2">
                <span>Algorithms</span>
                <span class="Counter">3</span>
            </a>
  
            <a class="tabnav-tab" href="#url">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
                    class="avatar avatar-2">
                <span>Competitive Programming</span>
                <span class="Counter">27</span>
            </a>
            <a class="tabnav-tab" href="#url">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
                    class="avatar avatar-2">
                <span>Topic Wise Practice</span>
                <span class="Counter">6</span>
            </a>
        </nav>
    </div>
</body>
  
</html>

Producción:

 

Referencia: https://primer.style/css/components/navigation

Publicación traducida automáticamente

Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *