Navigation

The portfolio template features a fixed vertical navigation bar with icon-based links that automatically highlight as users scroll through different sections. This navigation uses Bootstrap’s ScrollSpy feature for automatic active state management.

Structure

The navigation is implemented as a fixed sidebar element that appears on the left side of the screen on desktop devices.

Navigation HTML (lines 103-139)

<section id="navigation-bar" class="navigation position-fixed ">
  <ul class="nav nav-pills text-center align-items-center mt-5 ms-xl-5 ms-3 ">
    <li>
      <a href="#home" class="nav-link active rounded-0" aria-current="page" 
         data-bs-toggle="tooltip" data-bs-placement="right" 
         aria-label="Home" data-bs-original-title="Home">
        <i class="ti ti-home"></i>
      </a>
    </li>
    <li>
      <a href="#about" class="nav-link rounded-0" 
         data-bs-toggle="tooltip" data-bs-placement="right" 
         aria-label="Sobre mí" data-bs-original-title="Sobre mí">
        <i class="ti ti-user"></i>
      </a>
    </li>
    <li>
      <a href="#resume" class="nav-link rounded-0" 
         data-bs-toggle="tooltip" data-bs-placement="right" 
         aria-label="Resumen" data-bs-original-title="Resumen">
        <i class="ti ti-school"></i>
      </a>
    </li>
    <li>
      <a href="#portfolio" class="nav-link rounded-0" 
         data-bs-toggle="tooltip" data-bs-placement="right" 
         aria-label="Portafolio" data-bs-original-title="Portafolio">
        <i class="ti ti-briefcase"></i>
      </a>
    </li>
    <li>
      <a href="#contact" class="nav-link rounded-0" 
         data-bs-toggle="tooltip" data-bs-placement="right" 
         aria-label="Contacto" data-bs-original-title="Contacto">
        <i class="ti ti-phone"></i>
      </a>
    </li>
  </ul>
</section>

ScrollSpy Integration

ScrollSpy is activated on the <body> element to automatically update navigation links based on scroll position:

Body Tag Configuration (line 53)

<body data-bs-spy="scroll" data-bs-target="#navigation-bar" tabindex="0">

ScrollSpy Attributes

data-bs-spy=“scroll” - Enables Bootstrap ScrollSpy functionality
data-bs-target=“#navigation-bar” - Specifies which navigation element to update
tabindex=“0” - Makes the body focusable for ScrollSpy to work correctly

Styling

The navigation styling creates a vertical pill-style menu with hover and active states:

Navigation Styles (style.css 104-149)

.navigation {
  position: fixed;
  left: 20px;
  top: 30px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nav-pills {
  background: transparent;
  padding: 1rem 0.6rem;
  border-radius: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.nav-link {
  color: #6a829e;
  font-size: 2rem;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent-color);
  background: transparent !important;
}

.nav-link i.ti {
  transition: all 0.32s ease;
}

.nav-link:hover i.ti,
.nav-link.active i.ti {
  transform: scale(1.25);
}

Key Features

Auto-highlighting

Links automatically gain the .active class as users scroll to corresponding sections

Smooth Scrolling

Clicking navigation icons triggers smooth scroll to the target section

Icon-based Design

Uses Tabler Icons for a clean, minimal aesthetic with tooltips on hover

Scale Animation

Icons scale to 1.25x on hover and when active for visual feedback

Each section has a corresponding Tabler Icon:

Section	Icon Class	Visual
Home	`ti-home`	House icon
About	`ti-user`	Person silhouette
Resume	`ti-school`	Graduation cap
Portfolio	`ti-briefcase`	Briefcase
Contact	`ti-phone`	Phone

You can change icons by replacing the icon class names. Browse Tabler Icons for alternatives.

Responsive Behavior

The navigation has different visibility rules based on screen size:

Responsive Breakpoints (style.css 437-458)

@media (max-width: 1199px) {
  .navigation {
    display: none;
  }
}

On screens smaller than 1200px (tablets and mobile), the vertical navigation is hidden and users navigate via the offcanvas menu instead.

Accessibility Features

The navigation includes several accessibility enhancements:

ARIA Labels

Each link has aria-label attributes for screen readers describing the section it navigates to.

Bootstrap Tooltips

Tooltips are initialized on all navigation links with data-bs-toggle="tooltip" providing hover text for visual users.

Active State

The aria-current="page" attribute marks the currently active section for assistive technologies.

Keyboard Navigation

Adding a New Section

To add a new navigation item:

Add the section to your HTML

Create a new section with an id attribute:

<section id="blog">
  <!-- Blog content -->
</section>

Add navigation link

Insert a new list item in the navigation:

<li>
  <a href="#blog" class="nav-link rounded-0" 
     data-bs-toggle="tooltip" data-bs-placement="right" 
     aria-label="Blog" data-bs-original-title="Blog">
    <i class="ti ti-notebook"></i>
  </a>
</li>

Test ScrollSpy

Scroll through your page to ensure the new item highlights correctly when its section is visible.

Changing Icon Colors

Modify the navigation colors by updating CSS variables:

Custom Navigation Colors

.nav-link {
  color: #your-inactive-color;
}

.nav-link:hover,
.nav-link.active {
  color: #your-active-color;
}

Adjusting Position

Change the navigation placement:

Navigation Position

.navigation {
  left: 20px;   /* Distance from left edge */
  top: 30px;    /* Distance from top */
}

Tooltips require JavaScript initialization, which is handled in the inline script:

Tooltip Initialization (index.html 547-552)

(function () {
  var tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
  );
  tooltipTriggerList.forEach(function (tooltipTriggerEl) {
    new bootstrap.Tooltip(tooltipTriggerEl);
  });
})();

Do not remove this script or tooltips will not appear when hovering over navigation icons.

Mobile Alternative

On mobile devices (< 1200px width), the vertical navigation is replaced by the hamburger menu that opens the offcanvas sidebar. See the Hero Section documentation for details on the mobile menu implementation.

Getting Started

Customization

Components

Deployment

Navigation Component

Structure

ScrollSpy Integration

Styling

Key Features

Auto-highlighting

Smooth Scrolling

Icon-based Design

Scale Animation

Navigation Icons

Responsive Behavior

Accessibility Features

Customizing Navigation

Adding a New Section

Changing Icon Colors

Adjusting Position

Tooltip Initialization

Mobile Alternative

​Navigation Component

​Structure

​ScrollSpy Integration

​Styling

​Key Features

Auto-highlighting

Smooth Scrolling

Icon-based Design

Scale Animation

​Navigation Icons

​Responsive Behavior

​Accessibility Features

​Customizing Navigation

​Adding a New Section

​Changing Icon Colors

​Adjusting Position

​Tooltip Initialization

​Mobile Alternative

Navigation Component

Structure

ScrollSpy Integration

Styling

Key Features

Navigation Icons

Responsive Behavior

Accessibility Features

Customizing Navigation

Adding a New Section

Changing Icon Colors

Adjusting Position

Tooltip Initialization

Mobile Alternative