React Navbar Overview

    La barra de navegación Ignite UI for React informa al usuario de su posición actual en una aplicación. La barra de navegación también puede proporcionar enlaces a acciones rápidas como la búsqueda o el favorito, lo que ayuda a los usuarios a navegar sin problemas por una aplicación sin intentar pasar a rutas o estados no válidos. La barra se encuentra en la parte superior del recipiente en el que se coloca.

    React Navbar Example

    The following example represents a IgrNavbar with icons and text header:

    Usage

    Before using the IgrNavbar, you need to register it as follows:

    Para una introducción completa al Ignite UI for React, lee el tema Empezar.

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    You will then need to import the IgrNavbar and its necessary CSS like so:

    import { IgrNavbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrNavbar>
    <span>Navigation Title</span>
</IgrNavbar>

    Content

    You can enhance the IgrNavbar component by adding IgrIcon or other components at the start or end position as content, allowing users to navigate to key positions directly from the bar:

     <IgrNavbar>
    <div slot="start">
        <IgrIcon name="home" collection="material" />
    </div>
    <h2>Sample App</h2>
    <div slot="end">
        <IgrIcon name="search" collection="material" />
    </div>
    ...
</IgrNavbar>

    Styling

    The NavBar component exposes several CSS parts, giving you full control over its style:

    Nombre Descripción
    base El contenedor base de la barra de navegación.
    start El contenedor de iconos alineado a la izquierda.
    middle El contenedor de título de la barra de navegación.
    end El contenedor de iconos de acción alineados a la derecha. 
    igc-icon {
  color: var(--ig-primary-500);
}

igc-navbar {
  background-color: var(--ig-secondary-200);
}

igc-navbar::part(middle) {
  font-family: Titillium Web, sans-serif;
  color: var(--ig-primary-500);;
}

    Si todo ha ido bien deberías ver lo siguiente en tu navegador:

    API References

    Additional Resources