ant-design
  1. ant-design-anchor
PreviousNext

Ant Design Anchor

Ant Design Anchor is a component that provides easy navigation within a single page or across multiple pages of a website. It creates a set of clickable links that allow visitors to jump immediately to specific sections of a page or to other pages on the website. The Anchor component is especially useful for web pages with long content.

Syntax

To use the Ant Design Anchor component, you need to install the Ant Design library and import the Anchor component from the library.

The syntax for the Anchor component is as follows:

import { Anchor } from 'antd';

<Anchor>
  <Anchor.Link href="#section1" title="Section 1" />
  <Anchor.Link href="#section2" title="Section 2" />
  <Anchor.Link href="/other-page" title="Other Page" />
</Anchor>

Use and Importance

The Ant Design Anchor component enables users to easily navigate through large amounts of content on web pages. It is an essential tool for improving website user experience and making it easier for visitors to find what they are looking for quickly. With the Anchor component, users can easily scroll to different sections of a page or navigate to other pages without having to manually scroll through long pages or use the browser's back button.

Example

Here is an example of how the Ant Design Anchor component can be used to create a set of links that allows visitors to jump to different sections of a web page:

import { Anchor } from 'antd';

const HomePage = () => {
  return (
    <div>
      <Anchor>
        <Anchor.Link href="#section1" title="Section 1" />
        <Anchor.Link href="#section2" title="Section 2" />
        <Anchor.Link href="/about-us" title="About Us" />
      </Anchor>

      <h1 id="section1">Section 1</h1>
      <p>Content for section 1</p>

      <h1 id="section2">Section 2</h1>
      <p>Content for section 2</p>
    </div>
  );
};

export default HomePage;

In the example above, three links are created with the Anchor component. The first two links allow visitors to jump to two different sections on the same page (identified by h1 elements with id attributes that match the href values of the links). The third link allows visitors to navigate to a different page on the website.

Summary

The Ant Design Anchor component is a powerful tool for improving website navigation and user experience. Its simple syntax and ease of use make it an essential component for web developers looking to create web pages with large amounts of content. With the Anchor component, users can quickly find what they're looking for without having to manually scroll through long pages or navigate through multiple web pages.

SpaceBreadcrumb
Published on: