[React] 네비게이션 / BreadCrumbStrap

웹 내에서 유저의 위치를 나타내는 네비게이션 시스템 BreadCrumb

웹페이지에서 네비게이션 바가 주로 등장하는데 이를 사용하기 위해 BreadCrumb를 사용할 예정이다

 

[BreadCrumb]

import {Breadcrumb, BreadcrumbItem} from 'reactstrap'; // (1)

function BreadCrumbStrap(){
    return(
        <div id="top">
            <Breadcrumb tag="nav" listTag="div">
                <BreadcrumbItem tag="a" href="#top"> Go Top </BreadcrumbItem>
                <BreadcrumbItem tag="a" href="#bottom"> Go Bottom </BreadcrumbItem>
                <BreadcrumbItem active tag="span"> Data </BreadcrumbItem> // (2)
            </Breadcrumb>
            <div id="bottom" style={{marginTop:"1000px"}}>
                <span>bottom</span>
            </div>
        </div>
    )
}

export default BreadCrumbStrap;

(1) BreadCrumb와 BreadCrumbItem은 포함관계로 네비게이션 바는 BreadCrumb가 안의 요소는 BreadCrumbItem으로 지정

(2) BreadCrumbItem에 active 를 사용 가능한데, 해당 active를 포함시켜줄 경우 디자인이 가능해짐

 

* 위의 코드는 #id를 이용해 위 아래로 이동 가능하도록 설계한 코드